Source

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

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 :

Pantalons serrés de niveau supérieur keffieh dont vous n'avez probablement pas entendu parler. Photomaton beard raw denim letterpress vegan messenger bag sumptown. Du seitan de la ferme à la table, les vêtements américains fixie quinoa 8 bits durables de mcsweeney ont un chambray en vinyle terry richardson. Beard Stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, quatre loko mcsweeney's clean chambray végétalien. Un artisan vraiment ironique quel que soit le keytar , Scenester farm-to-table banksy Austin twitter handle freegan cred denim brut café d'origine unique viral.

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. De plus, la plupart des technologies d'assistance n'annoncent pas actuellement 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 focusable 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="".

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 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="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 de caractères 0 Décalage de l'info-bulle 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 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.js .

Attributs de données pour les info-bulles individuelles

Les options pour les 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…
})