Bootstrap - Tooltips : Guide pour les débutants

Salut à toi, futur(e) développeur(euse) web ! Aujourd'hui, on va plonger dans le monde merveilleux des infobulles de Bootstrap. En tant que ton prof de informatique du coin, je suis là pour t'accompagner dans cette aventure, pas à pas. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - on va commencer par les bases et progresser pas à pas. Alors, prends un café (ou ta boisson favorite) et c'est parti !

Qu'est-ce que les infobulles ?

Avant de rentrer dans le vif du sujet, comprens ce qu'elles sont. Tu as déjà hovered ta souris sur une icône ou du texte sur un site web et vu apparaître une petite fenêtre avec des informations supplémentaires ? C'est une infobulle ! Ce sont comme de petits assistants qui fournissent des informations supplémentaires ou des explications sans encombrer ton contenu principal.

Activer les infobulles

Voyons maintenant un peu de code. La première chose à faire est d'activer les infobulles dans Bootstrap. Ne t'inquiète pas ; c'est plus simple qu'il n'y paraît !

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

Ce petit script dit à Bootstrap : "Eh, on veut utiliser les infobulles sur cette page !" C'est comme appuyer sur l'interrupteur avant de pouvoir voir dans une pièce sombre.

Créer une infobulle

Créons notre première infobulle. C'est aussi simple que d'ajouter quelques attributs à un élément HTML :

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Je suis une infobulle !">
Passe ta souris sur moi
</button>

Voici ce qui se passe :

• On crée un bouton en utilisant les classes btn et btn-secondary de Bootstrap.
• data-toggle="tooltip" indique à Bootstrap que cet élément doit avoir une infobulle.
• title="Je suis une infobulle !" est le texte qui apparaîtra dans notre infobulle.

Quand tu passes ta souris sur ce bouton, tu verras "Je suis une infobulle !" apparaître. De la magie, n'est-ce pas ?

Infobulles sur des liens

Les infobulles ne sont pas réservées aux boutons. Ajoutons-en une à un lien :

<a href="#" data-toggle="tooltip" title="Clique-moi pour aller ailleurs !">Passe ta souris sur ce lien</a>

Ça fonctionne de la même manière que notre exemple de bouton. Quand tu passes ta souris sur le lien, tu vois le message d'infobulle.

Infobulles personnalisées

Maintenant, passons à quelque chose de plus fun. On peut personnaliser nos infobulles pour les rendre plus intéressantes :

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true"
title="<em>Infobulle</em> <u>avec</u> <b>HTML</b>">
Passe pour une infobulle HTML
</button>

Dans cet exemple, on a ajouté data-html="true" pour autoriser l'HTML dans notre infobulle. Maintenant, on peut utiliser des balises comme <em>, <u>, et <b> pour styliser le texte de notre infobulle.

Positionnement des infobulles

On peut contrôler où notre infobulle apparaît par rapport à notre élément. essayons les quatre positions :

<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">
Infobulle en bas
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Infobulle à gauche">
Infobulle à gauche
</button>

L'attribut data-placement indique à Bootstrap où positionner l'infobulle. C'est comme dire à ton ami où se tenir pour une photo !

Infobulle avec HTML personnalisé

souviens-toi comment on a activé l'HTML dans notre infobulle plus tôt ? Reprenons cela :

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true"
title="<h3>En-tête personnalisée</h3><p>Ceci est un paragraphe.</p><img src='smiley.gif' alt='Visage souriant'>">
Passe pour une surprise !
</button>

Cette infobulle inclut un en-tête, un paragraphe, et même une image ! C'est comme une mini page web à l'intérieur de notre infobulle.

Balisage personnalisé

Parfois, tu peux vouloir plus de contrôle sur la structure de ton infobulle. C'est là que rentre en jeu le balisage personnalisé :

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="Infobulle personnalisée">
Balisage d'infobulle personnalisé
</button>

Cet exemple utilise l'attribut data-template pour définir une structure personnalisée pour notre infobulle. C'est comme construire une maison plutôt que d'en acheter une préfabriquée !

Infobulle sur des éléments désactivés

D'habitude, les éléments désactivés ne déclenchent pas d'interactions utilisateur. Mais avec unpetit truc, on peut faire fonctionner les infobulles dessus :

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

On enveloppe notre bouton désactivé dans un span qui peut recevoir le focus. C'est comme donner un coup de main à quelqu'un qui ne peut pas atteindre l'étagère du haut !

Options

Enfin, regardons quelques options que nous pouvons utiliser pour personnaliser davantage nos infobulles :

Option	Type	Défaut	Description
animation	boolean	true	Appliquer une transition CSS de fondu à l'infobulle
container	string | false	false	Ajouter l'infobulle à un élément spécifique
delay	number | object	0	Délai avant l'affichage et le masquage de l'infobulle (ms)
html	boolean	false	Autoriser l'HTML dans l'infobulle
placement	string | function	'top'	Comment positionner l'infobulle
selector	string	false	Si un sélecteur est fourni, les objets d'infobulle seront délégués aux cibles spécifiées
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	HTML de base à utiliser lors de la création de l'infobulle
title	string | element | function	''	Valeur par défaut du titre si l'attribut title n'est pas présent
trigger	string	'hover focus'	Comment l'infobulle est déclenchée - click | hover | focus | manual

Tu peux utiliser ces options lors de l'initialisation de tes infobulles :

$('#example').tooltip({
animation: false,
delay: { "show": 500, "hide": 100 },
placement: 'right'
});

Ce code désactive l'animation de fondu, ajoute un délai, et place l'infobulle sur le côté droit de l'élément.

Et voilà ! Tu viens de faire tes premiers pas dans le monde des infobulles Bootstrap. souviens-toi, la clé pour maîtriser cela (et tout concept de codage) est la pratique. Essaie de créer une page web et d'ajouter différents types d'infobulles. Expérimente avec les options et vois ce que tu peux créer.

Avant de t'en rendre compte, tu seras le maître des infobulles, et tes pages web seront informatives et interactives ! Bon codage, et n'oublie pas de t'amuser en cours de route !

Credits: Image by storyset