Bootstrap4 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 à l'élémentpopoverpour créer un popover.

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

<a href="#" data-toggle="popover" title="Titre du popover" data-content="Contenu du popover">Cliquez sur moi plusieurs fois</a>

Remarque :Le popover doit être écrit dans le code d'initialisation jQuery : appelez la méthodepopover()sur l'élément spécifié.

L'exemple suivant peut être un popover n'importe où dans le document :

Exemple

$(document).ready(function(){ $('[data-toggle="popover"]').popover(); });

Essayez-le vous-même »

Spécifiez la position du popover

Par défaut, le popover s'affiche à droite de l'élément.

Vous pouvez utiliserdata-placementl'attribut pour définir la direction d'affichage du popover : haut, bas, gauche ou droite :

Exemple

<a href="#" title="En-tête" data-toggle="popover" data-placement="top" data-content="Contenu">Cliquez ici</a> <a href="#" title="En-tête" data-toggle="popover" data-placement="bottom" data-content="Contenu">Cliquez ici</a> <a href="#" title="En-tête" data-toggle="popover" data-placement="left" data-content="Contenu">Cliquez ici</a> <a href="#" title="En-tête" data-toggle="popover" data-placement="right" data-content="Contenu">Cliquez ici</a>

Essayez-le vous-même »

Utilisé dans les boutons :

Exemple

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover en haut </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover à droite </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover en bas </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover à gauche </button>

Essayez-le vous-même »

Fermer le popover

Par défaut, le popover se ferme lorsque l'élément spécifié est cliqué à nouveau. Vous pouvez utiliserdata-trigger="focus"attribut pour que le popover se ferme lors d'un clic en dehors de l'élément :

Exemple

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

Essayez-le vous-même »

Astuce :Si vous souhaitez obtenir l'effet d'affichage au survol de la souris sur l'élément et de masquage lorsque la souris quitte, vous pouvez utiliserdata-triggercomme attribut, et définir la valeur sur "hover" :

Exemple

<a href="#" title="En-tête" data-toggle="popover" data-trigger="hover" data-content="Du contenu">Passez la souris sur moi</a>

Essayez-le vous-même »
Autres extensions