Info-bulles

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

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Exemples

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

Survolez les boutons ci-dessous pour voir les quatre directions des info-bulles : haut, droite, 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-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-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-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Avec un SVG :

Toupet

variables

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

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 :

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

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

<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-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".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" 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-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".

Utilisation de la fonction avecpopperConfig

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

Méthodes

Afficher

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.

tooltip.show()

cacher

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.

tooltip.hide()

basculer

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.

tooltip.toggle()

disposer

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

tooltip.dispose()

activer

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

tooltip.enable()

désactiver

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.

tooltip.disable()

toggleEnabled

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

tooltip.toggleEnabled()

mettre à jour

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

tooltip.update()

getInstance

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

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

getOrCreateInstance

Méthode statique qui vous permet d'obtenir l'instance d'info-bulle 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 tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Événements

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()