Tooltip | Sodium design system

Side

When to use it

6 rules

Must: Give a tooltip a short label in sentence case, a verb and its object, and at most a shortcut. Because the label is the control's name in mono capitals, and links or sentences inside cannot be reached or read.
Never: Put anything a person needs in a tooltip alone. Because it never opens on touch and a screen reader may never meet it.
Should: Leave aria-label off an icon trigger with a tooltip; the tooltip's text names it. Because one string for the eye and the screen reader cannot drift apart.
Should: Wrap a toolbar's tooltips in one TooltipProvider. Because after the first opens, the next opens at once as the pointer moves along the row.
Never: Restyle the tooltip into a solid ink or yellow chip. Because a solid block on a white page pulls the eye like the slab does, and every Sodium overlay is the panel with a rule edge.
Must: Give a disabled control's tooltip a wrapper trigger that can take focus, and say why it is disabled on the page too. Because a disabled button takes no pointer or focus events, so its own tooltip never opens.

3 checks

: The trigger is described by the tooltip; a nameless trigger takes its text as aria-label.
: Keyboard focus opens it at once, and Escape closes it.
: The label is text-1 on the panel at 17.6:1 and 14.9:1; the edge is --line, the rule colour.

2 keys

4 edge cases

5 props

10 tokens