Tooltip : définition, fonctionnement et accessibilité

Tooltip : la définition d'une infobulle

Un tooltip est un petit message contextuel qui s'affiche près d'un élément d'interface quand l'utilisateur le survole ou le sélectionne. En français, on parle d'infobulle. Le texte est court : une phrase, parfois quelques mots. Il précise à quoi sert une icône, un champ ou un bouton, puis disparaît quand le pointeur s'éloigne.

Le tooltip fait partie des micro-éléments de l'expérience utilisateur. Il ne porte jamais l'information principale de la page. Il répond à une question précise au moment exact où elle se pose, par exemple : que veut dire ce sigle, que fait cette icône, quel format attend ce champ ?

À quoi sert un tooltip sur un site qui doit vendre

Sur un site d'entreprise, chaque doute non levé coûte une action. Un formulaire de devis avec un champ flou fait hésiter. Une grille tarifaire avec une option mal nommée fait fuir. Le tooltip traite ces petits blocages sans alourdir la page de paragraphes explicatifs.

• Expliquer une icône sans libellé, comme un engrenage ou une corbeille.
• Préciser le format attendu dans un champ : numéro SIRET, date, code postal.
• Détailler une option d'offre sans surcharger le tableau comparatif.
• Rappeler un raccourci clavier dans un logiciel métier ou un back-office.

Il ne faut pas le confondre avec d'autres messages d'interface. Une notification toast informe d'un événement, comme un enregistrement réussi. Une popover peut contenir des liens et des boutons. Le tooltip, lui, reste purement descriptif.

Comment fonctionne un tooltip en HTML et CSS

La structure : un élément déclencheur et un texte caché

Pour créer un tooltip, on part d'un conteneur, souvent une div ou une span, qui contient l'élément déclencheur et le texte d'aide. Le tooltip text est hidden par défaut, puis displayed when the user hovers the element. La logique tient en une ligne : au hover, on passe la bulle de cachée à visible. C'est le principe de la plupart des tutoriels, qui proposent chacun leur example de base.

Le texte est positionné en absolu par rapport à son conteneur. On peut placer the tooltip au-dessus, en dessous, à gauche (left) ou à droite de l'élément. Une petite flèche en CSS pointe vers la cible pour que le lien entre les deux soit évident.

Le style : largeur, border-radius et transition

Quelques propriétés suffisent à rendre la bulle propre. Une width fixe évite les lignes trop longues. Un border-radius arrondit les angles. Une transition sur l'opacité adoucit l'apparition, au lieu d'un clignotement brutal. Pensez aussi au contraste entre le texte et le fond : une bulle gris clair sur fond blanc ne se lit pas.

Tooltip et accessibilité : les règles à respecter

Un tooltip qui ne réagit qu'au survol exclut une partie des visiteurs. Ceux qui naviguent au clavier, utilisent un lecteur d'écran ou consultent le site sur téléphone ne le verront jamais. Les règles d'accessibilité web du RGAA, alignées sur les WCAG, encadrent précisément ces contenus qui apparaissent au survol ou au focus.

Clavier, focus et lecteurs d'écran

• La bulle s'affiche au focus clavier, pas seulement au hover over the element.
• Elle porte le rôle ARIA tooltip et l'élément déclencheur la référence avec aria-describedby.
• Elle se ferme avec la touche Échap, sans déplacer le focus.
• Elle reste visible tant que la souris est dessus, pour que l'on puisse la lire.
• Elle ne contient ni lien ni bouton : ce serait alors une popover ou une fenêtre de dialogue.

Sur mobile, il n'y a pas de survol. Un tooltip déclenché au toucher reste possible, mais une information vraiment utile gagne souvent à être écrite en clair sous le champ. C'est l'un des réflexes du responsive design.

Le cas des éléments désactivés

Un bouton désactivé ne reçoit ni les événements de la souris ni le focus. Son tooltip ne s'affiche donc pas, alors que c'est souvent là qu'on voudrait expliquer pourquoi l'action est bloquée. La solution courante consiste à placer le tooltip sur une span parente, rendue focusable. Mieux encore, on affiche directement la raison à côté du bouton.

Les tooltips dans les bibliothèques : Bootstrap, MUI, Angular, React, shadcn

Peu de projets codent leurs infobulles à la main. Les bibliothèques de composants gèrent le positionnement, les débordements d'écran et une partie de l'accessibilité. Ce travail se fait côté front end et dépend du framework choisi.

• Bootstrap propose des tooltips qu'il faut initialiser en JavaScript : ils ne s'activent pas tout seuls.
• MUI fournit un composant Tooltip pour les applications React, avec placement et délai réglables.
• Angular Material ajoute une directive matTooltip sur n'importe quel élément.
• shadcn/ui s'appuie sur les primitives Radix, qui gèrent déjà le clavier et les attributs ARIA.

Même avec ces outils, il faut tester. Un composant accessible par défaut peut perdre cette qualité si l'on change son déclencheur ou si l'on y glisse des éléments interactifs.

Les erreurs courantes avec les tooltips

• Cacher une information indispensable, comme un prix ou une condition, dans une bulle que beaucoup ne verront pas.
• Afficher le tooltip seulement au survol de la souris, sans prise en charge du focus clavier.
• Écrire un texte trop long qui déborde ou masque le champ à remplir.
• Répéter mot pour mot le libellé déjà visible, ce qui n'aide personne.
• Utiliser l'attribut title comme seule infobulle : son affichage dépend du navigateur et il n'apparaît pas au clavier.

Une bonne règle : si le visiteur doit absolument lire un texte pour passer à l'étape suivante, ce texte n'a rien à faire dans un tooltip. Lors d'une création de site internet, ces arbitrages se font dès les maquettes, pas après la mise en ligne.

Questions fréquentes