Bootstrap5 Popover

Le plugin popover est similaire à l'info-bulle ; il s'affiche après un clic sur un élément. Contrairement à l'info-bulle, il peut afficher plus de contenu.

Comment créer un popover

En ajoutant à un élémentdata-bs-toggle="popover"pour créer un popover.

titleLe contenu de l'attribut est le titre du popover,data-bs-contentl'attribut affiche le contenu textuel du popover :

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Titre du popover" data-bs-content="Contenu du popover">Cliquez sur moi plusieurs fois</button>

Remarque :Le popover doit être écrit dans le code d'initialisation JavaScript.

L'exemple suivant peut utiliser des popovers n'importe où dans le document :

Exemple

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) })

Essayez-le »

Spécifiez la position du popover

Par défaut, le popover apparaît sur le côté droit de l'élément.

Vous pouvez utiliserdata-bs-placementl'attribut pour définir la direction dans laquelle le popover apparaît : haut, bas, gauche ou droite :

Exemple

<a href="#" title="Titre" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Je suis la partie contenu">Cliquez ici</a> <a href="#" title="Titre" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Je suis la partie contenu">Cliquez ici</a> <a href="#" title="Titre" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Je suis la partie contenu">Cliquez ici</a> <a href="#" title="Titre" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Je suis la partie contenu">Cliquez ici</a>

Essayez-le »

Fermer le popover

Par défaut, le popover se ferme après avoir cliqué à nouveau sur l'élément spécifié. Vous pouvez utiliserdata-bs-trigger="focus"l'attribut pour définir la fermeture du popover lors d'un clic en dehors de l'élément :

Exemple

<a href="#" title="Fermer le popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Cliquez ailleurs dans le document pour me fermer">Cliquez ici</a>

Essayez-le »

Astuce :Si vous souhaitez obtenir l'effet d'affichage lorsque la souris survole l'élément et de masquage lorsqu'elle s'en éloigne, vous pouvez utiliserdata-bs-triggerl'attribut et définir la valeur sur "hover" :

Exemple

<a href="#" title="Titre" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Un contenu">Passez la souris sur moi</a>

Essayez-le »
Autres extensions