Pop -over Bootstrap 4
Pop-over Bootstrap 4
Le composant Popover est similaire aux info-bulles ; 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.
Basculer la fenêtre contextuelleComment 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>
Remarque : Les attributs de placement ne fonctionnent pas comme prévu s'il n'y a pas assez de place pour eux. Par exemple : si vous utilisez le placement supérieur en haut d'une page (où il n'y a pas de place pour lui), il affichera à la place le popover sous l'élément ou à droite (où qu'il y ait de la place pour lui).
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 .