Back to Motion Prompt examples
UI component names · #06
Tooltip
Hover over something to show a short label. Hovering over a "?" icon shows a short note in a dark bubble above it; it disappears when the cursor leaves.
Opening & overlaystooltiphinthoverhelpinfotitle
Full motion specification
How the movement works
Use it to add a one-line hint to an icon or abbreviation without taking space on the page.
- 014.5 s cycle on a 542×191 card. A "?" icon (blue ring, radius 13) at (196, 121) next to a label.
- 02The cursor only hovers, no click: it arrives on "?" at 1.05 s, stays until 3.15 s and leaves the card by 4.1 s.
- 03Show amount a: 0→1 over 1.15–1.35 s with easeOutCubic; opacity a, rising 6 px into place.
- 04Bubble: #26282c, 184×36, radius 8, top at y 64, with a 16-wide, 8-tall triangle pointing down at the icon; white 15 px text.
- 05Hide: linear 1→0 over 3.25–3.45 s.
Prompt
Add a tooltip to the "?" icon: show the note above it 0.2 s after hover, and hide it when the cursor leaves.