Info-bulle Bootstrap 4
Info-bulle Bootstrap 4
Le composant Tooltip est une petite boîte contextuelle qui apparaît lorsque l'utilisateur déplace le pointeur de la souris sur un élément :
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>
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 .