Bootstrap - Popovers: Guide pour les débutants
Salut à toi, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des Popovers de Bootstrap. Ne t'inquiète pas si tu es novice ; je vais te guider à chaque étape avec la même patience que j'utilise dans mes classes depuis des années. À la fin de ce tutoriel, tu seras capable de faire apparaître des popovers comme un pro !
Qu'est-ce que les Popovers ?
Avant de commencer, comprenons ce qu'est un popover. Imagine que tu lis un livre et qu'il y a un petit astérisque à côté d'un mot. Quand tu regardes en bas de la page, tu trouves des informations supplémentaires sur ce mot. C'est essentiellement ce que fait un popover sur une page web - il fournit des informations supplémentaires lorsque l'utilisateur interagit avec un élément.
Activer les Popovers
Premierement, nous devons activer les popovers. C'est comme allumer la lumière avant de commencer à lire - tu dois configurer les choses avant de pouvoir les utiliser.
Pour activer les popovers, tu dois inclure les fichiers JavaScript et CSS de Bootstrap dans ton document HTML. Voici comment tu fais :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Popovers</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Ton contenu va ici -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>Ce code met en place la structure de base d'un document HTML et inclut les fichiers CSS et JavaScript de Bootstrap. Le script en bas initialise tous les popovers sur la page.
Créer un Popover
Maintenant que nous avons configuré le terrain, créons notre premier popover ! C'est aussi simple que d'ajouter quelques attributs à un bouton.
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Titre du Popover" data-bs-content="Et voici du contenu incroyable. Ça interesse, non ?">Clique pour basculer le popover</button>Reprenons cela :
-
class="btn btn-lg btn-danger": Cela rend notre bouton grand et rouge. -
data-bs-toggle="popover": Cela indique à Bootstrap que cet élément doit déclencher un popover. -
title="Titre du Popover": Cela définit le titre de notre popover. -
data-bs-content="...": Ce sont les informations principales de notre popover.
Positionnement d'un Popover
Comme l'arrangement du mobilier dans une pièce, tu peux positionner ton popover de différentes manières. Bootstrap te permet de placer les popovers en haut, à droite, en bas ou à gauche d'un élément.
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover en haut">
Popover en haut
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Popover à droite">
Popover à droite
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Popover en bas">
Popover en bas
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Popover à gauche">
Popover à gauche
</button>L'attribut data-bs-placement détermine où le popover apparaît par rapport au bouton.
Popovers Personnalisés
Tu veux ajouter une touche personnelle à tes popovers ? Tu peux les personnaliser avec ton propre contenu HTML !
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-html="true" title="<h3>Titre Personnalisé</h3>" data-bs-content="<b>Texte en gras</b>. <a href='#'>Lien</a> inclus.">
Popover HTML Personnalisé
</button>Ici, nous avons défini data-bs-html="true" pour autoriser le HTML dans notre contenu de popover. Maintenant, nous pouvons utiliser des balises HTML dans notre titre et contenu !
Popover Non Fermeable
Parfois, tu veux que ton popover reste visible jusqu'à ce que l'utilisateur le ferme explicitement. C'est là que les popovers non fermables deviennent utiles.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover Non Fermeable" data-bs-content="Et voici du contenu incroyable. Ça interesse, non ?">Popover Non Fermeable</a>La clé ici est data-bs-trigger="focus". Cela signifie que le popover restera ouvert jusqu'à ce que l'utilisateur clique ailleurs sur la page.
Popover au Survol
Tu veux que ton popover apparaisse lorsque l'utilisateur survole un élément ? Très simple !
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Survole-moi !">
Survole pour déclencher le popover
</button>L'attribut data-bs-trigger="hover" fait apparaître le popover au survol.
Popover sur des éléments désactivés
Normalement, les éléments désactivés ne déclenchent pas d'interactions utilisateur. Mais avec unpetit truc, nous pouvons faire apparaître des popovers dessus aussi !
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Popover désactivé">
<button class="btn btn-primary" type="button" disabled>Bouton désactivé</button>
</span>Nous enveloppons notre bouton désactivé dans un <span> qui gère le déclenchement du popover.
Options
Bootstrap offre une variété d'options pour personnaliser tes popovers. Voici un tableau de quelques options courantes :
| Option | Type | Défaut | Description |
|---|---|---|---|
| animation | boolean | true | Appliquer une transition CSS fade au popover |
| container | string | element | false | false | Ajouter le popover à un élément spécifique |
| content | string | element | function | '' | Valeur de contenu par défaut si l'attribut data-bs-content n'est pas présent |
| delay | number | object | 0 | Délai pour afficher et masquer le popover (ms) |
| html | boolean | false | Autoriser le HTML dans le popover |
| placement | string | function | 'right' | Comment positionner le popover |
| selector | string | false | false | Si un sélecteur est fourni, les objets de popover seront délégués aux cibles spécifiées |
| template | string | <div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div> |
HTML de base à utiliser lors de la création du popover |
| title | string | element | function | '' | Valeur de titre par défaut si l'attribut title n'est pas présent |
| trigger | string | 'click' | Comment le popover est déclenché - click | hover | focus | manual |
Tu peux utiliser ces options lors de l'initialisation des popovers avec JavaScript :
var popover = new bootstrap.Popover(document.querySelector('#example'), {
trigger: 'hover',
placement: 'top'
})Et voilà ! Tu es maintenant un pro des Popovers Bootstrap. Souviens-toi, la clé pour maîtriser cela (et tout concept de codage) est la pratique. Alors vas-y, joue avec ces exemples, mélanges-les, et crée quelque chose d'incroyable. Bon codage !
Credits: Image by storyset