Speech Bubble

Une petite étiquette apparaît en fondu et se glisse à côté d’un élément après un court délai de survol.

Ajoute un « Tooltip Fade » (aussi appelé tooltip reveal) sur [où].
Après un court délai de survol, l’étiquette doit apparaître en fondu en se glissant légèrement à côté de l’élément, puis disparaître vite et sans délai quand le pointeur s’en va.
Affiche-le aussi au focus clavier, permets de le fermer avec Échap et relie-le à l’élément pour que les lecteurs d’écran le lisent.

Un menu flottant apparaît en fondu et s’agrandit depuis l’endroit où se trouve son déclencheur.

Ajoute une animation « Popover / Dropdown Open » (aussi appelée menu pop ou dropdown scale-fade) sur [où].
Le menu doit apparaître en fondu en grandissant légèrement depuis le coin proche de son déclencheur, rapide et net, puis disparaître un peu plus vite à la fermeture.
Garde-le ancré au déclencheur, ferme-le avec Échap ou un clic à l’extérieur, et expose l’état ouvert sur le déclencheur pour les lecteurs d’écran.

Au survol, un filet intérieur apparaît juste à l’intérieur du bord de l’élément.

Ajoute un effet au survol « Trim » sur [où].
Un filet fin doit apparaître en fondu juste à l’intérieur du bord de l’élément tant que le pointeur est dessus, puis disparaître quand il sort : discret, sans mouvement.
Garde le filet à l’intérieur de l’élément pour que sa taille ne change pas, et applique le même effet au focus clavier.

Une ligne glisse depuis le bord inférieur ou supérieur jusqu’à sa place pour souligner ou surligner l’élément par le haut.

Ajoute un effet au survol « Underline Reveal » (aussi appelé overline reveal ou reveal) sur [où].
Une ligne pleine largeur doit remonter en glissant jusqu’à sa place depuis juste sous le bord inférieur tant que le pointeur est sur l’élément, puis redescendre hors de vue quand il sort : rapide et fluide.
Rogne la ligne au bord pour qu’elle apparaisse en glissant plutôt qu’en fondu ou en s’allongeant, et applique le même effet au focus clavier.

La carte se déplace et change légèrement d’échelle en réponse au mouvement du pointeur sur elle.

Ajoute un effet « Wobble Card » sur [où].
Quand le pointeur se déplace sur la carte, celle-ci doit glisser légèrement vers lui tandis que son contenu glisse légèrement dans l’autre sens avec un petit agrandissement, en suivant en douceur, puis tout revient en place quand le pointeur sort.
Garde le mouvement réduit, et désactive-le sur les appareils tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).