Les tooltips une solution simple pour l'ergonomie de ton site

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

A 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

Garde un message court et clair

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

A voir : Apprendre à faire une animation type scroll-snapping

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

A voir : Créer une animation type machine à écrire avec JavaScript

Méthode 3 : HTML et JS pour des tooltips dynamiques

<button id="btn">Survole-moi</button>
<div id="tooltip" style="
  display:none;
  position:absolute;
  background:#000;
  color:#fff;
  padding:5px 10px;
  border-radius:5px;
  font-size:14px;
"></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

A voir : Créer son extension WordPress : suivez le guide !

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 (l’expérience utilisateur) de ton site ou app. Comprendre et les utiliser correctement le principe te permettra de créer des interfaces plus claires, plus intuitives, et plus accessibles.