in English

Info-bulles

Documentation et exemples pour l'ajout d'info-bulles Bootstrap personnalisées avec CSS et JavaScript à l'aide de CSS3 pour les animations et les attributs de données pour le stockage de titre local.

Aperçu

Choses à savoir lors de l'utilisation du plugin d'info-bulle :

  • Les info-bulles 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 infobulles fonctionnent !
  • Si vous construisez notre JavaScript à partir de la source, cela nécessiteutil.js .
  • Les info-bulles sont facultatives pour des raisons de performances, vous devez donc les initialiser vous -même .
  • Les info-bulles avec des titres de longueur nulle ne sont jamais affichées.
  • 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 d'info-bulles sur des éléments masqués ne fonctionnera pas.
  • Les info-bulles pour les éléments .disabledou disableddoivent être déclenchées sur un élément wrapper.
  • Lorsqu'elles sont déclenchées à partir d'hyperliens qui s'étendent sur plusieurs lignes, les info-bulles seront centrées. Utilisez white-space: nowrap;sur votre <a>s pour éviter ce comportement.
  • Les info-bulles doivent être masquées avant que leurs éléments correspondants aient été supprimés du DOM.
  • Les info-bulles peuvent être déclenchées grâce à un élément à l'intérieur d'un shadow DOM.
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é .

Vous avez tout ça ? Super, voyons comment ils fonctionnent avec quelques exemples.

Exemple : Activer les info-bulles partout

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

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

Exemples

Passez la souris sur les liens ci-dessous pour afficher les info-bulles :

Texte d'espace réservé pour illustrer certains liens en ligne avec des info-bulles. C'est maintenant juste du remplissage, pas de tueur. Contenu placé ici juste pour imiter la présence de texte réel . Et tout cela juste pour vous donner une idée de l'apparence des info-bulles lorsqu'elles sont utilisées dans des situations réelles. J'espère donc que vous avez maintenant vu comment ces info-bulles sur les liens peuvent fonctionner dans la pratique, une fois que vous les utilisez sur votre propre site ou projet.

Survolez les boutons ci-dessous pour voir les quatre directions des info-bulles : haut, droite, bas et gauche.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Et avec le code HTML personnalisé ajouté :

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Usage

Le plug-in d'info-bulle génère du contenu et du balisage à la demande, et place par défaut les info-bulles après leur élément déclencheur.

Déclenchez l'info-bulle via JavaScript :

$('#example').tooltip(options)
Débordement autoetscroll

La position de l'info-bulle tente de changer automatiquement lorsqu'un conteneur parent a overflow: autoou overflow: scrollressemble à notre .table-responsive, mais conserve toujours le positionnement de l'emplacement d'origine. Pour résoudre, définissez l' boundaryoption sur autre chose que la valeur par défaut 'scrollParent', telle que'window' :

$('#example').tooltip({ boundary: 'window' })

Balisage

Le balisage requis pour une info-bulle n'est qu'un dataattribut et titlesur l'élément HTML, vous souhaitez avoir une info-bulle. Le balisage généré d'une info-bulle est assez simple, bien qu'il nécessite une position (par défaut, définie toppar le plugin).

Faire en sorte que les info-bulles fonctionnent pour les utilisateurs de clavier et de technologie d'assistance

Vous ne devez ajouter des info-bulles qu'aux éléments HTML qui sont traditionnellement accessibles au clavier et interactifs (tels que des liens ou des 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 l'info-bulle dans cette situation. De plus, ne comptez pas uniquement sur hoverle déclencheur de votre info-bulle, car cela rendra vos info-bulles impossibles à déclencher pour les utilisateurs de clavier.

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Éléments désactivés

Les éléments avec l' disabledattribut ne sont pas interactifs, ce qui signifie que les utilisateurs ne peuvent pas se concentrer, survoler ou cliquer dessus pour déclencher une info-bulle (ou popover). Comme solution de contournement, vous souhaiterez déclencher l'info-bulle à partir d'un wrapper <div>ou <span>, idéalement rendu focalisable au clavier à l'aide de tabindex="0", et remplacer le pointer-eventssur l'élément désactivé.

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

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="".

Notez que pour des raisons de sécurité, les options sanitize, sanitizeFnet ne peuvent pas être fournies à l'aide d'attributs de données.whiteList
Nom Taper Défaut La description
animation booléen vrai Appliquer une transition de fondu CSS à l'info-bulle
récipient chaîne | élément | faux faux

Ajoute l'info-bulle à un élément spécifique. Exemple : container: 'body'. Cette option est particulièrement utile car elle permet de positionner l'infobulle dans le flux du document à proximité de l'élément déclencheur - ce qui empêchera l'infobulle de s'éloigner de l'élément déclencheur lors d'un redimensionnement de fenêtre.
retard nombre | objet 0

Délai d'affichage et de masquage de l'info-bulle (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

Autoriser HTML dans l'info-bulle.

Si vrai, les balises HTML dans l'info-bulle titleseront rendues dans l'info-bulle. 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 'Haut'

Comment positionner l'infobulle - auto | haut | bas | gauche | droit.
Lorsque autoest spécifié, il réorientera dynamiquement l'info-bulle.

Lorsqu'une fonction est utilisée pour déterminer le placement, elle est appelée avec le nœud DOM de l'info-bulle comme premier argument et le nœud DOM de l'élément déclencheur comme second. Le thiscontexte est défini sur l'instance d'info-bulle.
sélecteur chaîne | faux faux Si un sélecteur est fourni, les objets d'info-bulle seront délégués aux cibles spécifiées. En pratique, cela est utilisé pour appliquer également des info-bulles aux éléments DOM ajoutés dynamiquement ( jQuery.onsupport). Voir ceci et un exemple informatif .
modèle chaîne de caractères '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

HTML de base à utiliser lors de la création de l'info-bulle.

Les info-bulles titleseront injectées dans le fichier .tooltip-inner.

.arrowdeviendra la flèche de l'info-bulle.

L'élément wrapper le plus externe doit avoir la .tooltipclasse et role="tooltip".
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 l'info-bulle est attachée.
gâchette chaîne de caractères 'survoler la mise au point'

Comment l'info-bulle est déclenchée - cliquez sur | planer | concentrer | manuel. Vous pouvez passer plusieurs déclencheurs ; séparez-les par un espace.

'manual'indique que l'info-bulle sera déclenchée par programmation via les méthodes et .tooltip('show'); cette valeur ne peut être combinée avec aucun autre déclencheur..tooltip('hide').tooltip('toggle')

'hover'à lui seul entraînera des info-bulles qui ne peuvent pas être déclenchées via le clavier et ne doivent être utilisées que si des méthodes alternatives pour transmettre les mêmes informations aux utilisateurs du clavier sont présentes.
décalage nombre | chaîne | fonction 0

Décalage de l'info-bulle par rapport à sa cible.

Lorsqu'une fonction est utilisée pour déterminer le décalage, elle est appelée avec un objet contenant les données de décalage comme premier argument. La fonction doit retourner un objet avec la même structure. Le nœud DOM de l'élément déclencheur est passé comme second argument.

Pour plus d'informations, reportez-vous à la documentation de décalage de Popper .
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 à la documentation sur le comportement de Popper
classe personnalisée chaîne | fonction ''

Ajoutez des classes à l'info-bulle lorsqu'elle s'affiche. 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 : 'a b'.

Vous pouvez également passer une fonction qui doit renvoyer une seule chaîne contenant des noms de classe supplémentaires.
frontière chaîne | élément 'scrollParent' Limite de contrainte de débordement de l'info-bulle. 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 .
désinfecter booléen vrai Activez ou désactivez la désinfection. Si activé 'template'et les 'title'options seront désinfectées. Voir la section désinfectant dans notre documentation JavaScript .
liste blanche objet Valeur par défaut Objet qui contient des attributs et des balises autorisés
assainirFn nul | fonction nul 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.
popperConfig nul | objet nul Pour modifier la configuration Popper par défaut de Bootstrap, consultez la configuration de Popper

Attributs de données pour les info-bulles individuelles

Les options des info-bulles individuelles 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 .

$().tooltip(options)

Attache un gestionnaire d'info-bulles à une collection d'éléments.

.tooltip('show')

Révèle l'info-bulle d'un élément. Revient à l'appelant avant que l'info-bulle ne soit réellement affichée (c'est-à-dire avant que l' shown.bs.tooltipévénement ne se produise). Ceci est considéré comme un déclenchement "manuel" de l'info-bulle. Les info-bulles avec des titres de longueur nulle ne sont jamais affichées.

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

.tooltip('hide')

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

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

.tooltip('toggle')

Bascule l'info-bulle d'un élément. Revient à l'appelant avant que l'info-bulle n'ait été réellement affichée ou masquée (c'est-à-dire avant que l' événement shown.bs.tooltipou ne hidden.bs.tooltipse produise). Ceci est considéré comme un déclenchement "manuel" de l'info-bulle.

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

.tooltip('dispose')

Masque et détruit l'info-bulle d'un élément. Les info-bulles qui utilisent la délégation (qui sont créées à l'aide de l' selectoroption ) ne peuvent pas être détruites individuellement sur les éléments déclencheurs descendants.

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

.tooltip('enable')

Donne à l'info-bulle d'un élément la possibilité d'être affichée. Les info-bulles sont activées par défaut.

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

.tooltip('disable')

Supprime la possibilité d'afficher l'info-bulle d'un élément. L'info-bulle ne pourra s'afficher que si elle est réactivée.

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

.tooltip('toggleEnabled')

Active/désactive la possibilité d'afficher ou de masquer l'info-bulle d'un élément.

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

.tooltip('update')

Met à jour la position de l'info-bulle d'un élément.

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

Événements

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