twitter-bootstrap
Info-bulle
Recherche…
Remarques
L'info-bulle est un élément d'interface utilisateur qui ressemble à une petite fenêtre contextuelle. Il est généralement déclenché lorsqu'un utilisateur passe son pointeur sur un autre élément, sans cliquer dessus.
Pour des raisons de performances, les info-bulles doivent être initialisées avec jQuery. Le code suivant activera toutes les info-bulles dans le DOM:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Info-bulles de positionnement
Par défaut, l'info-bulle apparaîtra au-dessus de l'élément. Nous pouvons utiliser data-placement attribut de data-placement pour définir la position de l'info-bulle en haut, en bas, à gauche ou à droite de l'élément.
<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a
Nous pouvons également utiliser data-placement="auto" pour réorienter dynamiquement l'info-bulle. L'info-bulle dans l'exemple suivant, l'info-bulle s'affichera à gauche si possible, sinon elle s'affichera correctement.
<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a
Exemple de base
Pour créer une info-bulle, il suffit d'ajouter l'attribut data-toggle="tooltip" et un title à l'élément HTML qui aura l'infobulle. L'attribut Title est utilisé pour spécifier le texte affiché dans l'info-bulle.
<span data-toggle="tooltip" title="Hello world!">Hover over me</span>
