Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Infobulle (*Tooltip*)

Infobulle (*Tooltip*)

Composant
Définition

Petit élément flottant qui apparaît au survol ou au focus d'un élément d'interface pour fournir une information complémentaire. L'infobulle disparaît dès que le curseur quitte la zone de déclenchement. Elle ne contient que du texte court, sans éléments interactifs. Son positionnement (haut, bas, gauche, droite) s'adapte automatiquement à l'espace disponible. L'infobulle est un complément, jamais un substitut à un label visible.

En pratique

On l'utilise pour expliciter une icône, un acronyme ou une action ambigüe. Le délai d'apparition évite les déclenchements accidentels (300-500 ms recommandés). Sur mobile, le survol n'existant pas, l'infobulle se déclenche au tap long ou se remplace par un texte d'aide permanent. L'attribut `title` natif HTML est insuffisant : il n'est pas stylistiquement contrôlable et pose des problèmes d'accessibilité. Le rôle ARIA `tooltip` et l'attribut `aria-describedby` sont requis.

Exemple

Figma affiche des infobulles sur chaque outil de la barre latérale avec le nom de l'outil et son raccourci clavier. Le délai est calibré pour ne pas gêner les utilisateurs expérimentés.

Voir aussi
Accessibilité (*Accessibility*)
Affordance
Micro-interaction
Progressive disclosure
ARIA (*Accessible Rich Internet Applications*)
Sources
Tooltip Guidelines - Nielsen Norman Group
Tooltip Pattern - WAI-ARIA
Le Journal d'UX est un média indépendant sur l'expérience utilisateur. Liens curatés, wiki UX en français, communauté.