Pop-ups Bootstrap 5

Boîte de dialogue

Le composant boîte de dialogue (Popover) est similaire à l'infobulle ; c'est une boîte de dialogue qui apparaît lorsque l'utilisateur clique sur un élément. La différence réside dans le fait que le boîte de dialogue peut contenir plus de contenu.

Comment créer un boîte de dialogue

Pour créer un boîte de dialogue, veuillez mettre data-bs-toggle="popover" Ajouter à l'élément.

Utiliser title L'attribut spécifie le texte de titre du boîte de dialogue contextuelle, et utilise data-bs-content L'attribut spécifie le texte à afficher dans le texte du boîte de dialogue contextuelle :

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Titre du boîte de dialogue" data-bs-content="Certaines informations du boîte de dialogue">Basculer le boîte de dialogue</button>

Attention :Les boîtes de dialogue contextuelles doivent être initialisées avec JavaScript pour fonctionner.

Le code suivant activera tous les boîtes de dialogue contextuels du document :

Exemple

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

Essayez-le vous-même

Positionner le boîte de dialogue contextuelle

Par défaut, le boîte de dialogue contextuelle apparaîtra à droite de l'élément.

Utiliser data-bs-placement Positionner le boîte de dialogue contextuelle en haut, en bas, à gauche ou à droite de l'élément :

Exemple

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="En-tête" data-bs-toggle="popover" data-bs-placement="left" data-content="Contenu">Gauche</a>
<a href="#" title="En-tête" data-bs-toggle="popover" data-bs-placement="right" data-content="Contenu">Droite</a>

Essayez-le vous-même

Attention :Si il n'y a pas assez d'espace, l'attribut placement ne fonctionnera pas comme prévu. Par exemple : si vous utilisez l'attribut placement top en haut de la page (sans espace de réservation), il se transformera en affichage en dessous ou à droite de l'élément (n'importe où il y a de l'espace).

Fermer la boîte pop-up

Par défaut, la fenêtre pop-up se ferme lors d'un autre clic sur l'élément. Cependant, vous pouvez utiliser data-bs-trigger="focus" Attribut, en définissant cet attribut, vous pouvez fermer la fenêtre pop-up en cliquant en dehors de l'élément :

Exemple

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Cliquez sur n'importe quel endroit du document pour fermer cette fenêtre pop-up">Cliquez sur moi</a>

Essayez-le vous-même

Boîte pop-up au survol

Astuce :Si vous souhaitez que la boîte pop-up apparaisse lorsque vous déplacez le pointeur de la souris sur l'élément, utilisez la valeur "hover" de data-bs-trigger Attribut :

Exemple

<a href="#" title="En-tête" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Texte de la boîte pop-up">Hover me au-dessus</a>

Essayez-le vous-même