Tooltip

[Fanny27]

Composant tooltip

Le tooltip permet d’aider, de clarifier des éléments ou de donner des conseils à l’utilisateur. Elle peut être utilisée pour préciser:

• les icônes sans label.
• un texte
• un bouton
• un lien
• une image

Il est important de les positionner a proximité, sans masquer le contenu au quel elle est reliée.

Composition La tooltip est utilisé exclusivement sur desktop pour afficher du micro-contenu (100 caractères max) et est composée

• Un container
• un pointeur
• un label

Placement La tooltip est toujours placée centrée à 4px de l’objet.
Elle est placée au dessus de son objet sauf si l’interface ne lui permet pas (expl: dans un header, ou si la tooltip apparait hors du champ de l’utilisateur (limite de l’écran).)

Orientation

Animation La tooltip est initiée au long hover (souris ou clavier), déroulé de l’interaction:

• Le curseur de la souris entre dans la zone cible : il affiche un retour visuel (hover state) en moins de 0,1 seconde .
• Attendez 0,4 secondes.
• Si le curseur reste arrêté dans la zone cible, afficher le contenu caché correspondant dans un délai de 0,1 seconde (long hover state).
• Continuez à afficher l'élément de contenu exposé jusqu'à ce que le curseur ait quitté la zone cible de déclenchement ou le contenu exposé pendant plus de 0,5 seconde.

Ressources

• Documentation Figma
• Composant Tooltip