Passer au contenu principal Passer à la navigation dans les documents
in English

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 pour le positionnement. Vous devez inclure popper.min.js avant bootstrap.js ou utiliser bootstrap.bundle.min.js/ bootstrap.bundle.jsqui contient Popper pour que les popovers fonctionnent !
  • Les popovers nécessitent le plug -in d'info-bulle en tant que dépendance.
  • 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 .text-nowrapsur 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.
  • Les popovers peuvent être déclenchés grâce à un élément à l'intérieur d'un DOM shadow.
Par défaut, ce composant utilise le nettoyeur de contenu intégré, qui supprime tous les éléments HTML qui ne sont pas explicitement autorisés. Voir la section désinfectant dans notre documentation JavaScript pour plus de détails.
L'effet d'animation de ce composant dépend de la prefers-reduced-motionrequête multimédia. Voir la section mouvement réduit de notre documentation sur l'accessibilité .

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-bs-toggleattribut :

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

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.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Exemple

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-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. Les directions sont mises en miroir lors de l'utilisation de Bootstrap dans RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  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.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  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>, idéalement rendu focusable au clavier à l'aide de tabindex="0".

Pour les déclencheurs de popover désactivés, vous pouvez également préférer data-bs-trigger="hover focus"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" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Toupet

variables

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Usage

Activez les popovers via JavaScript :

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Faire en sorte que les popovers fonctionnent pour les utilisateurs de clavier et de technologie d'assistance

Pour permettre aux utilisateurs du clavier d'activer vos popovers, vous ne devez les ajouter qu'aux éléments HTML qui sont traditionnellement accessibles au clavier et interactifs (tels que les liens ou les contrôles de formulaire). Bien que des éléments HTML arbitraires (tels que <span>s) puissent être rendus focalisables en ajoutant l' tabindex="0"attribut, cela ajoutera des taquets de tabulation potentiellement gênants et déroutants sur les éléments non interactifs pour les utilisateurs de clavier, et la plupart des technologies d'assistance n'annoncent actuellement pas le contenu du popover dans cette situation. . De plus, ne comptez pas uniquement sur hoverle déclencheur pour vos popovers, car cela les rendra impossibles à déclencher pour les utilisateurs de clavier.

Bien que vous puissiez insérer du HTML riche et structuré dans les popovers avec l' htmloption, nous vous recommandons fortement d'éviter d'ajouter une quantité excessive de contenu. La façon dont les popovers fonctionnent actuellement est qu'une fois affichés, leur contenu est lié à l'élément déclencheur avec l' aria-describedbyattribut . En conséquence, l'intégralité du contenu du popover sera annoncé aux utilisateurs de technologies d'assistance sous la forme d'un flux long et ininterrompu.

De plus, s'il est possible d'inclure également des contrôles interactifs (tels que des éléments de formulaire ou des liens) dans votre popover (en ajoutant ces éléments aux allowListattributs et balises autorisés), sachez qu'actuellement, le popover ne gère pas l'ordre de focus du clavier. Lorsqu'un utilisateur du clavier ouvre un popover, le focus reste sur l'élément déclencheur, et comme le popover ne suit généralement pas immédiatement le déclencheur dans la structure du document, il n'y a aucune garantie qu'avancer/appuyer surTABdéplacera un utilisateur de clavier dans le popover lui-même. En bref, le simple fait d'ajouter des contrôles interactifs à un popover est susceptible de rendre ces contrôles inaccessibles/inutilisables pour les utilisateurs de clavier et les utilisateurs de technologies d'assistance, ou à tout le moins de créer un ordre de mise au point global illogique. Dans ces cas, envisagez plutôt d'utiliser une boîte de dialogue modale.

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-bs-, comme dans data-bs-animation="". Assurez-vous de changer le type de casse du nom de l'option de camelCase à kebab-case lors du passage des options via les attributs de données. Par exemple, au lieu d'utiliser data-bs-customClass="beautifier", utilisez data-bs-custom-class="beautifier".

Notez que pour des raisons de sécurité, les sanitizeoptions , sanitizeFnet ne peuvent pas être fournies à l'aide d'attributs de données.allowList
Nom Taper Défaut La description
animation booléen true Appliquer une transition de fondu CSS au popover
container chaîne | élément | faux false

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 à proximité 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.

content chaîne | élément | fonction ''

Valeur de contenu par défaut si data-bs-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é.

delay 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 false Insérez HTML dans le popover. Si false, innerTextla propriété sera utilisée pour insérer du contenu dans le DOM. Utilisez du texte si vous craignez les attaques XSS.
placement chaîne | fonction 'right'

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.

selector chaîne | faux false 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 .
template chaîne de caractères '<div class="popover" role="tooltip"><div class="popover-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.

.popover-arrowdeviendra la flèche du popover.

L'élément wrapper le plus externe doit avoir la .popoverclasse.

title 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é.

trigger chaîne de caractères 'click' Comment le popover est déclenché - cliquez | planer | concentrer | manuel. Vous pouvez passer plusieurs déclencheurs ; séparez-les par un espace. manualne peut être combiné avec aucun autre déclencheur.
fallbackPlacements déployer ['top', 'right', 'bottom', 'left'] Définissez les emplacements de remplacement en fournissant une liste d'emplacements dans le tableau (par ordre de préférence). Pour plus d'informations, reportez-vous à la documentation sur le comportement de Popper
boundary chaîne | élément 'clippingParents' Limite de contrainte de débordement du popover (s'applique uniquement au modificateur preventOverflow de Popper). Par défaut, c'est 'clippingParents'et peut accepter une référence HTMLElement (via JavaScript uniquement). Pour plus d'informations, reportez-vous à la documentation detectOverflow de Popper .
customClass chaîne | fonction ''

Ajoutez des classes au popover lorsqu'il est affiché. Notez que ces classes seront ajoutées en plus de toutes les classes spécifiées dans le modèle. Pour ajouter plusieurs classes, séparez-les par des espaces : 'class-1 class-2'.

Vous pouvez également passer une fonction qui doit renvoyer une seule chaîne contenant des noms de classe supplémentaires.

sanitize booléen true Activez ou désactivez la désinfection. Si elles sont activées 'template', les options 'content'et 'title'seront désinfectées. Voir la section désinfectant dans notre documentation JavaScript .
allowList objet Valeur par défaut Objet qui contient des attributs et des balises autorisés
sanitizeFn nul | fonction null Ici, vous pouvez fournir votre propre fonction de désinfection. Cela peut être utile si vous préférez utiliser une bibliothèque dédiée pour effectuer la désinfection.
offset tableau | chaîne | fonction [0, 8]

Décalage du popover par rapport à sa cible. Vous pouvez transmettre une chaîne dans les attributs de données avec des valeurs séparées par des virgules comme :data-bs-offset="10,20"

Lorsqu'une fonction est utilisée pour déterminer le décalage, elle est appelée avec un objet contenant le placement du popper, la référence et les rectangles du popper comme premier argument. Le nœud DOM de l'élément déclencheur est passé comme second argument. La fonction doit retourner un tableau avec deux nombres : .[skidding, distance]

Pour plus d'informations, reportez-vous à la documentation de décalage de Popper .

popperConfig nul | objet | fonction null

Pour modifier la configuration Popper par défaut de Bootstrap, consultez Popper's configuration .

Lorsqu'une fonction est utilisée pour créer la configuration Popper, elle est appelée avec un objet qui contient la configuration Popper par défaut de Bootstrap. Il vous aide à utiliser et à fusionner la valeur par défaut avec votre propre configuration. La fonction doit renvoyer un objet de configuration pour Popper.

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.

Utilisation de la fonction avecpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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 .

Afficher

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 tous les deux de longueur nulle ne sont jamais affichés.

myPopover.show()

cacher

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.

myPopover.hide()

basculer

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.

myPopover.toggle()

disposer

Masque et détruit le popover d'un élément (supprime les données stockées sur l'élément DOM). 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.

myPopover.dispose()

activer

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

myPopover.enable()

désactiver

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

myPopover.disable()

toggleEnabled

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

myPopover.toggleEnabled()

mettre à jour

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

myPopover.update()

getInstance

Méthode statique qui permet d'obtenir l'instance popover associée à un élément DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Méthode statique qui permet d'obtenir l'instance popover associée à un élément DOM, ou d'en créer une nouvelle au cas où elle n'aurait pas été initialisée

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

É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.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})