Speech Bubble (Sprechblase)

Ein kleines Label blendet nach kurzer Hover-Verzögerung neben einem Element ein und rückt dabei leicht an seinen Platz.

Füge bei [wo] einen „Tooltip Fade“ hinzu (auch Tooltip Reveal genannt).
Nach einer kurzen Hover-Verzögerung soll das Label einblenden und dabei leicht neben das Element rücken, dann ohne Verzögerung schnell verschwinden, sobald der Zeiger es verlässt.
Zeige ihn auch bei Tastaturfokus, lass ihn mit Escape schließen und verknüpfe ihn mit dem Element, damit Screenreader ihn vorlesen.

Ein schwebendes Menü blendet ein und wächst dabei von der Stelle aus, an der sein Auslöser sitzt.

Füge bei [wo] eine „Popover / Dropdown Open“-Animation hinzu (auch menu pop oder dropdown scale-fade genannt).
Das Menü soll einblenden und dabei leicht aus der Ecke neben seinem Auslöser herauswachsen, schnell und knackig, und beim Schließen etwas schneller ausblenden.
Halte es am Auslöser verankert, schließe es mit Escape oder einem Klick außerhalb und gib den geöffneten Zustand am Auslöser für Screenreader an.

Beim Hovern erscheint eine innere Randlinie knapp innerhalb der Kante des Elements.

Füge bei [wo] einen „Trim“-Hover-Effekt hinzu.
Eine dünne Linie soll knapp innerhalb der Kante des Elements einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden: dezent, ohne Bewegung.
Halte die Linie innerhalb des Elements, damit sich seine Größe nicht ändert, und zeige denselben Effekt beim Tastaturfokus.

Eine Linie gleitet von der Unter- oder Oberkante an ihren Platz und unter- oder überstreicht das Element.

Füge bei [wo] einen „Underline Reveal“-Hover-Effekt hinzu (auch overline reveal oder reveal genannt).
Eine Linie über die volle Breite soll von knapp unterhalb der Unterkante nach oben an ihren Platz gleiten, solange der Zeiger über dem Element ist, und beim Verlassen wieder nach unten aus dem Blick gleiten: schnell und weich.
Schneide die Linie an der Kante ab, damit sie durch Gleiten erscheint statt durch Einblenden oder Wachsen, und zeige denselben Effekt beim Tastaturfokus.

Die Karte verschiebt und skaliert sich leicht, wenn sich der Zeiger über ihr bewegt.

Füge bei [wo] einen „Wobble Card“-Effekt hinzu.
Wenn sich der Zeiger über die Karte bewegt, soll sie sich leicht zu ihm hin verschieben, während ihr Inhalt sich leicht in die Gegenrichtung verschiebt und etwas vergrößert, weich folgend, und beim Verlassen kehrt alles an seinen Platz zurück.
Halte die Bewegung klein und schalte sie auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) ab.