Qu’est-ce qu’un tooltip ?
Définition
Un tooltip (en français « infobulle ») est une petite boîte de texte qui apparaît lorsqu’un utilisateur interagit avec un élément (souvent au survol ou au focus). Il fournit des informations contextuelles, sans prendre de place à l’écran.
exemple de tooltips
À quoi servent les tooltips ?
Les tooltips sont utilisés pour :
- Expliquer des icônes ou boutons dont la signification n’est pas évidente
- Donner des infos supplémentaires sans alourdir le design
- Aider les utilisateurs à comprendre une action ou une fonctionnalité
- Améliorer l’accessibilité et la compréhension de l’interface
Comment faire des tooltips efficaces
Il faut respecter un certain nombre de règles :
- Être concis (évite les phrases longues)
- Donner une information claire et explicative (ce qui donne une vraie valeur ajoutée)
- Lié à l’élément concerné
- Affiche ton tooltip au survol (souris) ou au focus (clavier)
- Cache-le rapidement dès que l’utilisateur sort de l’élément
- N’ajoute pas de délai trop long
Exemple :
❌ Mauvais : “Cliquez ici pour envoyer le formulaire, ce bouton permet de soumettre les données au serveur.”
✅ Bon : “Envoyer le formulaire”Implémentation : créer ton tooltip de zéro
Je vais te montrer des exemples à travers trois méthodes :
Méthode 1 : HTML natif avec title
<button title="Clique ici pour envoyer le formulaire">Envoyer</button>Avantages :
- Super simple
- Fonctionne sans code JS ou CSS
Inconvénients :
- Pas personnalisable
- Apparence dépend du navigateur
- Accessibilité limitée
Méthode 2 : avec du HTML et CSS personnalisé
<style>
.tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip-text {
visibility: hidden;
background-color: #333;
color: #fff;
text-align: center;
padding: 5px 8px;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
</style>
<div class="tooltip-container">
<button>ℹ️</button>
<div class="tooltip-text">Ceci est une info-bulle personnalisée</div>
</div>Avantages :
- Totalement personnalisable
- Design responsive et moderne
Inconvénients :
- Nécessite du CSS
- Peut devenir complexe à maintenir à grande échelle
Méthode 3 : HTML et JS pour des tooltips dynamiques
<button id="btn">Survole-moi</button>
<div id="tooltip" class="dynamic-tooltip"></div>
<script>
const btn = document.getElementById("btn");
const tooltip = document.getElementById("tooltip");
btn.addEventListener("mouseenter", (e) => {
tooltip.innerText = "Texte affiché dynamiquement";
tooltip.style.left = e.pageX + "px";
tooltip.style.top = (e.pageY + 20) + "px";
tooltip.style.display = "block";
});
btn.addEventListener("mouseleave", () => {
tooltip.style.display = "none";
});
</script>Avantages :
- Contrôle total (position, texte, comportement)
- Parfait pour des tooltips dynamiques (contenu basé sur l’élément, l’action, etc.)
Inconvénients :
- Plus de code à gérer
- Besoin de bien tester le comportement sur différents écrans
Pour aller plus loin : Utilise une bibliothèque dédiée (ex : Tippy.js)
Quand tu travailles sur un projet un peu plus gros, tu peux gagner du temps et ajouter des fonctionnalités avancées grâce à des bibliothèques comme Tippy.js.
<!-- Inclure Tippy.js -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<!-- Élément avec tooltip -->
<button id="myButton">Aide</button>
<script>
tippy('#myButton', {
content: 'Clique ici pour obtenir de l’aide',
placement: 'top',
animation: 'fade',
});
</script>Avantages :
- Apparence pro
- Animations intégrées
- Gestion automatique de la position
- Bonne accessibilité native
Idéal pour : des dashboards ou des interfaces riches
Conclusion
Les tooltips sont des outils simples mais puissants pour améliorer l’UX de ton site ou app. Les utiliser correctement te permettra de créer des interfaces plus claires, plus intuitives et plus accessibles.
