Tooltip
Spec
A small panel that describes what the pointer or the keyboard is on. Tooltip in code, Figma 110:8553. First used for the marks on the Road to payday track.
Surface and type
- surface-raised-inverse with text-inverse (7.20:1 light, 16.54:1 dark), radius md, shadow-float, padding space/lg.
- At most 200px wide. A long name ends in an ellipsis.
- Heading in the label style, so capitals. A row's name in row, its amount in row-secondary.
- Muted lines in text-secondary-inverse (4.93:1 light, 7.30:1 dark). A total row sits above a 1px rule.
- A warning is a pill on surface-warning with text-warning. Amber never sits directly on the inverse surface.
Arrow and place
- The arrow is a triangle of the same surface. In Figma it points up; above its trigger it is mirrored and points down.
- The arrow always sits on the middle of what the tooltip describes.
- Near the edge of the window the tooltip shifts sideways to stay inside, and the arrow stays where it was.
Behavior
- Opens on focus, and on hover after a short delay. Closes when the pointer leaves, on Escape, and when focus moves on.
- role="tooltip", tied to its trigger with aria-describedby.
- It never takes the pointer or the focus, and what it says is always available another way.
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.0.0, Oct 13 2026: First version, for the marks on the Road to payday track: heading, rows, muted lines, a total and a warning pill. (#97)