Source

popovers

Documentation et exemples pour ajouter des popovers Bootstrap, comme ceux trouvés dans iOS, à n'importe quel élément de votre site.

Aperçu

Choses à savoir lors de l'utilisation du plugin popover :

  • Les popovers s'appuient sur la bibliothèque tierce Popper.js pour le positionnement. Vous devez inclure popper.min.js avant bootstrap.js ou utiliser bootstrap.bundle.min.js/ bootstrap.bundle.jsqui contient Popper.js pour que les popovers fonctionnent !
  • Les popovers nécessitent le plug -in d'info-bulle en tant que dépendance.
  • Si vous construisez notre JavaScript à partir de la source, cela nécessiteutil.js .
  • Les popovers sont opt-in pour des raisons de performances, vous devez donc les initialiser vous -même .
  • La longueur nulle titleet contentles valeurs n'afficheront jamais de popover.
  • Spécifiez container: 'body'pour éviter les problèmes de rendu dans des composants plus complexes (comme nos groupes d'entrée, groupes de boutons, etc.).
  • Le déclenchement de popovers sur des éléments cachés ne fonctionnera pas.
  • Les popovers pour les éléments .disabledor disableddoivent être déclenchés sur un élément wrapper.
  • Lorsqu'ils sont déclenchés à partir d'ancres qui s'étendent sur plusieurs lignes, les popovers seront centrés entre la largeur globale des ancres. Utilisez white-space: nowrap;sur votre <a>s pour éviter ce comportement.
  • Les popovers doivent être masqués avant que leurs éléments correspondants ne soient supprimés du DOM.

Continuez à lire pour voir comment les popovers fonctionnent avec quelques exemples.

Exemple : Activer les popovers partout

Une façon d'initialiser tous les popovers sur une page serait de les sélectionner par leur data-toggleattribut :

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

Exemple : Utilisation de l' containeroption

Lorsque vous avez des styles sur un élément parent qui interfèrent avec un popover, vous voudrez spécifier une coutume containerafin que le HTML du popover apparaisse dans cet élément à la place.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Exemple

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Quatre directions

Quatre options sont disponibles : aligné en haut, à droite, en bas et à gauche.

<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 on top
</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 on right
</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 on bottom
</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 on left
</button>

Ignorer au prochain clic

Utilisez le focusdéclencheur pour fermer les popovers au prochain clic de l'utilisateur sur un élément différent de l'élément bascule.

Balisage spécifique requis pour le rejet au prochain clic

Pour un comportement correct entre navigateurs et plates-formes, vous devez utiliser la <a>balise, pas la <button>balise, et vous devez également inclure un tabindexattribut.

Popover désactivable 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

Éléments désactivés

Les éléments avec l' disabledattribut ne sont pas interactifs, ce qui signifie que les utilisateurs ne peuvent pas les survoler ou cliquer dessus pour déclencher un popover (ou une info-bulle). Comme solution de contournement, vous souhaiterez déclencher le popover à partir d'un wrapper <div>ou <span>remplacer le pointer-eventssur l'élément désactivé.

Pour les déclencheurs de popover désactivés, vous pouvez également préférer data-trigger="hover"que le popover apparaisse comme un retour visuel immédiat pour vos utilisateurs, car ils ne s'attendent peut-être pas à cliquer sur un élément désactivé.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Usage

Activez les popovers via JavaScript :

$('#example').popover(options)

Choix

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-, comme dans data-animation="".

Nom Taper Défaut La description
animation booléen vrai Appliquer une transition de fondu CSS au popover
récipient chaîne | élément | faux faux

Ajoute le popover à un élément spécifique. Exemple : container: 'body'. Cette option est particulièrement utile car elle permet de positionner le popover dans le flux du document près de l'élément déclencheur - ce qui empêchera le popover de s'éloigner de l'élément déclencheur lors d'un redimensionnement de fenêtre.
contenu chaîne | élément | fonction ''

Valeur de contenu par défaut si data-contentl'attribut n'est pas présent.

Si une fonction est donnée, elle sera appelée avec sa thisréférence définie sur l'élément auquel le popover est attaché.
retard nombre | objet 0

Délai d'affichage et de masquage du popover (ms) - ne s'applique pas au type de déclenchement manuel

Si un nombre est fourni, un délai est appliqué à la fois pour masquer/afficher

La structure de l'objet est :delay: { "show": 500, "hide": 100 }
html booléen faux Insérez HTML dans le popover. Si false, la méthode de jQuery textsera utilisée pour insérer du contenu dans le DOM. Utilisez du texte si vous craignez les attaques XSS.
placement chaîne | fonction 'droit'

Comment positionner le popover - auto | haut | bas | gauche | droit.
Lorsque autoest spécifié, il réorientera dynamiquement le popover.

Lorsqu'une fonction est utilisée pour déterminer le placement, elle est appelée avec le nœud DOM popover comme premier argument et le nœud DOM de l'élément déclencheur comme second. Le thiscontexte est défini sur l'instance de popover.
sélecteur chaîne | faux faux Si un sélecteur est fourni, les objets popover seront délégués aux cibles spécifiées. En pratique, cela est utilisé pour permettre au contenu HTML dynamique d'avoir des popovers ajoutés. Voir ceci et un exemple informatif .
modèle chaîne de caractères '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML de base à utiliser lors de la création du popover.

Les popovers titleseront injectés dans le fichier .popover-header.

Les popovers contentseront injectés dans le fichier .popover-body.

.arrowdeviendra la flèche du popover.

L'élément wrapper le plus externe doit avoir la .popoverclasse.
Titre chaîne | élément | fonction ''

Valeur de titre par défaut si titlel'attribut n'est pas présent.

Si une fonction est donnée, elle sera appelée avec sa thisréférence définie sur l'élément auquel le popover est attaché.
gâchette chaîne de caractères 'Cliquez sur' Comment le popover est déclenché - cliquez | planer | concentrer | manuel. Vous pouvez passer plusieurs déclencheurs ; séparez-les par un espace. `manuel` ne peut être combiné avec aucun autre déclencheur.
décalage nombre | chaîne de caractères 0 Décalage du popover par rapport à sa cible. Pour plus d'informations, reportez-vous à la documentation offset de Popper.js .
placement de secours chaîne | déployer 'retourner' Permet de spécifier la position que Popper utilisera lors du repli. Pour plus d'informations, reportez-vous aux documents de comportement de Popper.js
frontière chaîne | élément 'scrollParent' Limite de contrainte de débordement du popover. Accepte les valeurs de 'viewport', 'window', 'scrollParent'ou une référence HTMLElement (JavaScript uniquement). Pour plus d'informations, reportez-vous à la documentation preventOverflow de Popper.js .

Attributs de données pour les popovers individuels

Les options pour les popovers individuels peuvent également être spécifiées via l'utilisation d'attributs de données, comme expliqué ci-dessus.

Méthodes

Méthodes et transitions asynchrones

Toutes les méthodes API sont asynchrones et démarrent une transition . Ils reviennent à l'appelant dès que la transition est commencée mais avant qu'elle ne se termine . De plus, un appel de méthode sur un composant en transition sera ignoré .

Consultez notre documentation JavaScript pour plus d'informations.

$().popover(options)

Initialise les popovers pour une collection d'éléments.

.popover('show')

Révèle le popover d'un élément. Retourne à l'appelant avant que le popover n'ait été affiché (c'est-à-dire avant que l' shown.bs.popoverévénement ne se produise). Ceci est considéré comme un déclenchement "manuel" du popover. Les popovers dont le titre et le contenu sont de longueur nulle ne sont jamais affichés.

$('#element').popover('show')

.popover('hide')

Masque le popover d'un élément. Retourne à l'appelant avant que le popover n'ait été masqué (c'est-à-dire avant que l' hidden.bs.popoverévénement ne se produise). Ceci est considéré comme un déclenchement "manuel" du popover.

$('#element').popover('hide')

.popover('toggle')

Bascule le popover d'un élément. Revient à l'appelant avant que le popover n'ait été réellement affiché ou masqué (c'est-à-dire avant que l' événement shown.bs.popoverou ne hidden.bs.popoverse produise). Ceci est considéré comme un déclenchement "manuel" du popover.

$('#element').popover('toggle')

.popover('dispose')

Masque et détruit le popover d'un élément. Les popovers qui utilisent la délégation (créés à l'aide de l' selectoroption ) ne peuvent pas être détruits individuellement sur les éléments déclencheurs descendants.

$('#element').popover('dispose')

.popover('enable')

Donne au popover d'un élément la possibilité d'être affiché. Les popovers sont activés par défaut.

$('#element').popover('enable')

.popover('disable')

Supprime la possibilité d'afficher le popover d'un élément. Le popover ne pourra s'afficher que s'il est réactivé.

$('#element').popover('disable')

.popover('toggleEnabled')

Active/désactive la possibilité d'afficher ou de masquer le popover d'un élément.

$('#element').popover('toggleEnabled')

.popover('update')

Met à jour la position du popover d'un élément.

$('#element').popover('update')

Événements

Type d'événement La description
show.bs.popover Cet événement se déclenche immédiatement lorsque la showméthode d'instance est appelée.
montré.bs.popover Cet événement est déclenché lorsque le popover a été rendu visible à l'utilisateur (il attendra que les transitions CSS soient terminées).
hide.bs.popover Cet événement est déclenché immédiatement lorsque la hideméthode d'instance a été appelée.
caché.bs.popover Cet événement est déclenché lorsque le popover a fini d'être caché à l'utilisateur (il attendra que les transitions CSS soient terminées).
inséré.bs.popover Cet événement est déclenché après l' show.bs.popoverévénement lorsque le modèle de popover a été ajouté au DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})