Tooltip
A short black label with white type that names a control. It shows on hover and on keyboard focus.
Hover or tab to each one. The icon button’s tooltip lines up with its right edge, since icon buttons sit at the end of a row; the others center under or over their control.
On black
Positions
The tail points at the control from 4px away. Below or above, the tooltip lines up at the start, middle or end; left or right, it sits beside the control, centered on it. Shown open here.
Parts
| Part | Markup | Look |
|---|---|---|
| Tooltip | .sys-tooltip with data-tip="…" on the control | Black block, 12px white caps, 6px from the control; white with black caps on black |
| On an icon button | .sys-icon-btn with data-tip; no extra class. Set --icon-size if the glyph isn’t 24px | Lines up with the button’s right edge; the tail points at the center of the icon, 4px from the glyph |
| Tail | Drawn by the tooltip | 6px triangle in the tooltip’s color; its tip always 4px from the control |
| Side | below (default), .sys-tooltip--above, .sys-tooltip--left, .sys-tooltip--right | Which side of the control the tooltip and tail sit on |
| Along the edge | middle (default), .sys-tooltip--start, .sys-tooltip--end | Above or below only. At the start or end the tooltip lines up with that edge and the tail’s center sits 22px in, the center of a 44px icon button |
Stipulations
- Black with white type on white, newsprint or a color; white with black type on black, so it always stands off what’s behind it.
- One to three words, naming the action: “Copy style”, not “Click here to copy this style to your clipboard”. Changes to say what happened (“Copied”) when that helps.
- Never the only place something is said. Phones have no hover, so the control has to make sense without its tooltip; an icon button also carries the same words in
aria-label. - It shows after a short pause (0.15s) on hover and at once on keyboard focus, and never takes a click.
- Square, with a tail and no shadow. Only on controls, never on plain text.
- The tail points at the control, 4px away, whatever side the tooltip is on. Pick the side and alignment that keep the tooltip on screen: end for a control at the right edge, start at the left edge, above near the bottom of the window.