Bootstrap4 Infobulle

Une info-bulle est une petite fenêtre contextuelle qui apparaît lorsque la souris survole un élément et disparaît lorsque la souris s'éloigne de l'élément.

Comment créer une infobulle

En ajoutant à un élémentdata-toggle="tooltip"pour créer une infobulle.

titleLe contenu de l'attribut est le contenu affiché dans l'infobulle :

<a href="#" data-toggle="tooltip" title="Je suis le contenu de l'infobulle !">Passez la souris sur moi</a>

Remarque :L'infobulle doit être écrite dans le code d'initialisation jQuery : puis, sur l'élément spécifié, appelez la méthodetooltip().

Les exemples suivants peuvent utiliser des infobulles n'importe où dans le document :

Exemple

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

Essayez-le »

Spécifier la position de l'infobulle

Par défaut, l'infobulle est affichée au-dessus de l'élément.

Vous pouvez utiliser l'attributdata-placementpour définir la direction dans laquelle l'infobulle est affichée : top, bottom, left ou right :

Exemple

<a href="#" data-toggle="tooltip" data-placement="top" title="Je suis le contenu de l'infobulle !">Passez la souris sur moi</a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="Je suis le contenu de l'infobulle !">Passez la souris sur moi</a> <a href="#" data-toggle="tooltip" data-placement="left" title="Je suis le contenu de l'infobulle !">Passez la souris sur moi</a> <a href="#" data-toggle="tooltip" data-placement="right" title="Je suis le contenu de l'infobulle !">Passez la souris sur moi</a>

Essayez-le »

Utiliser dans un bouton :

Exemple

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Infobulle en haut"> Infobulle en haut </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Infobulle à droite"> Infobulle à droite </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Infobulle en bas"> Info-bulle en bas </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Info-bulle à gauche"> Info-bulle à gauche </button>

Essayez-le »

Pour ajouter des balises HTML au contenu de l'info-bulle, définissez data-html="true" et placez le contenu à l'intérieur de l'attribut title :

Exemple

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

Essayez-le »

Bouton désactivé :

Exemple

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

Essayez-le »

Autres extensions