Tooltip
A small text label that appears next to an element on hover or focus, briefly explaining what it does.
Tooltips show identifying or supplementary text for an element. The W3C ARIA pattern restricts tooltips to short, plain text that describes the trigger. Tooltips appear on hover and on keyboard focus, never on click, and they should not contain interactive content. For richer previews, use a hover card instead.
Also called
hintinfo bubblelabel tip
When to use
- Icon-only buttons that need a text label for clarity
- Truncated text that the user might want to read in full
- Short hints about a control's behavior
When not to use
- Content the user needs to act on (use a popover or dialog)
- Critical information (hover and focus are not universal triggers)
- Touch-only contexts where hover does not exist
Related
Source
W3C ARIA Authoring Practices Guide. Material Design documents 'Tooltip'; Apple HIG documents the macOS 'help tag' equivalent.