Balloons d'outils Bootstrap 5

Tooltip

Le composant tooltip est une petite boîte contextuelle qui apparaît lorsque l'utilisateur déplace le pointeur de la souris sur l'élément :

Comment créer un tooltip

Pour créer un tooltip, veuillez ajouter data-bs-toggle="tooltip" L'attribut est ajouté à l'élément.

Utilisez title L'attribut spécifie le texte à afficher dans le tooltip :

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Très bien !">Hover me above !</button>

Remarque :Les infobulles doivent être initialisées avec JavaScript pour fonctionner.

Le code suivant activera toutes les infobulles du document :

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

Essayez-le vous-même

Positionner l'infobulle

Par défaut, l'infobulle apparaîtra en haut de l'élément.

Utilisez data-bs-placement Définir la position de l'infobulle en haut, en bas, à gauche ou à droite de l'élément :

Exemple

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Très bien !">Surligner</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Très bien !">Surligner</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Très bien !">Surligner</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Très bien !">Surligner</a>

Essayez-le vous-même