Le Popover Plugin
Le Popover plugin est similaire à infobulles; il est une boîte de 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.
Astuce: Plugins peuvent être inclus individuellement ( à l' aide Bootstrap's individuels "popover.js" fichiers), ou tout à la fois ( en utilisant "bootstrap.js" ou "bootstrap.min.js" ).
Comment faire pour créer un Popover
Pour créer un popover , ajouter les data-toggle="popover" attribut à un élément.
Utilisez le title attribut pour spécifier le texte d' en- tête de l'popover et utiliser le data-content attribut pour spécifier le texte qui doit être affiché à l' intérieur du popover's du corps:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> Note: Popovers doivent être initialisées avec jQuery: sélectionnez l'élément spécifié et appellent le popover() méthode.
Le code suivant permettra à tous les popovers dans le document:
Exemple
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Essayez - le vous - même » positionnement Popovers
Par défaut, le popover apparaîtra sur le côté droit de l'élément.
Utilisez les data-placement de popover data-placement attribut pour définir la position du popover sur le dessus, en bas, à gauche ou le côté droit 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>
Essayez - le vous - même » Astuce: Vous pouvez également utiliser l'attribut data-placement d'une valeur de "auto" , qui vous permettra de le navigateur décider de la position du popover . Par exemple, si la valeur est "auto left" , l' popover affichera sur le côté gauche lorsque cela est possible, sinon sur la droite.
Fermeture Popovers
Par défaut, le popover est fermé lorsque vous cliquez sur l'élément nouveau. Cependant, vous pouvez utiliser les data-trigger="focus" attribut qui clôturera la popover en cliquant 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>
Essayez - le vous - même » Astuce: Si vous voulez que le popover à afficher lorsque vous déplacez le pointeur de la souris sur l'élément, utilisez les data-trigger attribut avec une valeur de "hover" :
Exemple
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Essayez - le vous - même » Remplissez Bootstrap Popover Référence
Pour une référence complète de tous les popover options, méthodes et événements, rendez - vous à notre Bootstrap JS Popover Référence .