Components
Tooltip
componentoverlayhoverlabelhelp
A small label that appears on hover or focus to provide supplementary information.
When to use
- Icon-only buttons that need a label for clarity
- Truncated text that needs to reveal its full value
- Never use for critical information — it's hidden until hovered
Examples
- Hovering a toolbar icon reveals its keyboard shortcut
- Hovering a truncated filename shows the full path
See this in the wild
Analyze a site and look for tooltip in the breakdown.
