Plug-in d'info -bulle Bootstrap
Le plugin d'info-bulle
Le plugin Tooltip est une petite boîte pop-up qui apparaît lorsque l'utilisateur déplace le pointeur de la souris sur un élément :
Conseil : Les plugins peuvent être inclus individuellement (à l'aide du fichier individuel "tooltip.js" de Bootstrap), ou tous à la fois (à l'aide de "bootstrap.js" ou "bootstrap.min.js").
Comment créer une info-bulle
Pour créer une info-bulle, ajoutez l' data-toggle="tooltip"
attribut à un élément.
Utilisez l' titleattribut 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 info- bulles doivent être initialisées avec jQuery : sélectionnez l'élément spécifié et appelez la tooltip()méthode.
Le code suivant activera toutes les info-bulles dans le document :
Exemple
<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.
Utilisez l' data-placementattribut pour définir la position de l'info-bulle en haut, en bas, à gauche ou à droite 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>
Astuce : Vous pouvez également utiliser l' data-placementattribut avec une valeur de " auto", ce qui laissera le navigateur décider de la position de l'info-bulle. Par exemple, si la valeur est " auto left", l'info-bulle s'affichera sur le côté gauche lorsque cela est possible, sinon sur la droite.
Référence complète de l'info-bulle Bootstrap
Pour une référence complète de toutes les options, méthodes et événements d'info-bulle, accédez à notre Bootstrap JS Tooltip Reference .