Plugin Popover Bootstrap
Le plugin Popover
Le plugin Popover est similaire aux infobulles ; c'est une boîte pop-up qui apparaît lorsque l'utilisateur clique sur un élément. La différence est que le popover peut contenir beaucoup plus de contenu.
Conseil : Les plugins peuvent être inclus individuellement (à l'aide du fichier individuel "popover.js" de Bootstrap), ou tous à la fois (à l'aide de "bootstrap.js" ou "bootstrap.min.js").
Comment créer un popover
Pour créer un popover, ajoutez l' data-toggle="popover"
attribut à un élément.
Utilisez l' titleattribut pour spécifier le texte d'en-tête du popover, et utilisez l' data-contentattribut pour spécifier le texte qui doit être affiché dans le corps du popover :
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Remarque : Les popovers doivent être initialisés avec jQuery : sélectionnez l'élément spécifié et appelez la popover()méthode.
Le code suivant activera tous les popovers dans le document :
Exemple
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Positionnement des popovers
Par défaut, le popover apparaîtra sur le côté droit de l'élément.
Utilisez l' data-placementattribut pour définir la position du popover en haut, en bas, à gauche ou à droite de l'élément :
Exemple
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Astuce : Vous pouvez également utiliser l'attribut data-placement avec une valeur "auto", qui laissera le navigateur décider de la position du popover. Par exemple, si la valeur est "auto left", le popover s'affichera à gauche lorsque cela est possible, sinon à droite.
Clôture des popovers
Par défaut, la popover se ferme lorsque vous cliquez à nouveau sur l'élément. Cependant, vous pouvez utiliser l' data-trigger="focus"attribut qui fermera le popover en cliquant en dehors de l'élément :
Exemple
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Astuce : Si vous souhaitez que le popover s'affiche lorsque vous déplacez le pointeur de la souris sur l'élément, utilisez l' data-triggerattribut avec une valeur de "hover" :
Exemple
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Référence complète de Popover Bootstrap
Pour une référence complète de toutes les options, méthodes et événements de popover, consultez notre Bootstrap JS Popover Reference .