Tooltip
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
When to use
- Naming an icon only control, which is the single most common and most necessary use.
- Showing a value that is truncated, so the full text is available without widening the column.
- A short clarification that would clutter the layout if it were always on screen.
When not to use
- Anything essential. A tooltip is not available on touch, so what it says can never be the only copy of it.
- Anything interactive. A link or button inside a tooltip cannot be reached, because the tooltip closes on the way.
- Long text. That is an inline dialog or a popup.
- Repeating a visible label. It adds a delay and says nothing new.
Guidance
Do
Keep it to a few words that name the action, and attach it to something focusable.
Don't
Do not put an explanation in a tooltip. It is too long to read before it closes and touch readers never see it at all.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| tooltip | neutral-boldest | 0.714Marked | 0.809Marked |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- A few words. No sentences and no full stop.
- Name the action or the thing, rather than describing what will happen in detail.
- Do not repeat a label that is already visible.