Tooltip
A tooltip is a floating label that explains an element or feature. It has no actions.
When to use
- Naming a control that shows only an icon. This is the most common use.
- Showing the full text of a truncated value, without widening the column.
- A short explanation that would clutter the layout if it were always visible.
When not to use
- Anything essential. Tooltips do not work on touch screens, so never put information only in a tooltip.
- Anything interactive. People cannot reach a link or button inside a tooltip, because the tooltip closes first.
- Long text. Use an inline dialog or a popup.
- Repeating a visible label. It adds 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 people on touch screens never see it.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. 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 item. Do not describe in detail what will happen.
- Do not repeat a label that is already visible.