Le plugin Tooltip
Le plugin Tooltip est petite boîte de pop-up qui apparaît lorsque l'utilisateur déplace le pointeur de la souris sur un élément:
Astuce: Plugins peuvent être inclus individuellement ( à l' aide Bootstrap's individuels "tooltip.js" fichiers), ou tout à la fois ( en utilisant "bootstrap.js" ou "bootstrap.min.js" ).
Comment faire pour créer une info-bulle
Pour créer une info - bulle, ajouter les data-toggle="tooltip" attribut à un élément.
Utilisez le title attribut pour spécifier le texte qui doit être affiché dans l'info - bulle:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> Remarque: les infobulles doit être initialisé avec jQuery: sélectionnez l'élément spécifié et appeler l' tooltip() méthode.
Le code suivant permettra à tous les infobulles dans le document:
Exemple
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Essayez - le vous - même » Positionnement infobulles
Par défaut, l'infobulle apparaîtra au-dessus de l'élément.
Utilisez les data-placement de data-placement attribut pour définir la position de la bulle sur le dessus, en bas, à gauche ou le côté droit de l'élément:
Exemple
<a href="#" data-toggle="tooltip" data-placement="top"
title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip"
data-placement="bottom" title="Hooray!">Hover</a>
<a href="#"
data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a
href="#" data-toggle="tooltip" data-placement="right"
title="Hooray!">Hover</a>
Essayez - le vous - même » Astuce: Vous pouvez également utiliser le data-placement attribut avec une valeur de "auto", qui vous permettra de le navigateur décider de la position de l'infobulle. Par exemple, si la valeur est "auto left" , l'infobulle affiche sur le côté gauche lorsque cela est possible, sinon sur la droite.
Remplissez Bootstrap Tooltip Référence
Pour une référence complète de toutes les infobulles options, méthodes et événements, rendez - vous à notre Bootstrap JS Tooltip Référence .