Tooltip
A small dark label that appears on hover. Used sparingly — only when the trigger isn't already self-explanatory.
Usage
Hover-reveal label for icon-only triggers. Always pair with an aria-label so screen readers see the label too.
Settings
Print Z-report ⌘P
Add filter
Placement
Four placements. Default is bottom; use top when the trigger sits near the page bottom.
Above
Below
On the left
On the right
With keyboard shortcut
Tooltips for buttons with shortcuts pair the label with a Kbd.
Charge saleF12
Search⌘K
Anatomy
| Property | Value | Notes |
|---|---|---|
| bg | --ink | Dark by default; very rarely surface |
| fg | --canvas | — |
| padding | 5 px 9 px | 7 px 12 px when shortcut is included |
| radius | 6 px | 8 px for the shortcut variant |
| delay | 300 ms hover-in | 120 ms hover-out |
| offset | 8 px from trigger | — |
Do & don't
Do
Use a tooltip on icon-only buttons. They look ambiguous without one.
Don't
Add a tooltip to a labeled button. The label already says what it does.
Do
Keep the text under three words when possible.
Don't
Use a tooltip to hide essential information. Long descriptions belong inline or in a popover.