Tooltip
Definition
A small text box that appears when hovering over an element, providing additional context or explanation.
What is a Tooltip?
A tooltip is a small informational popup that appears when users hover over (or tap on mobile) an element. It provides additional context, explains icons, or offers hints without cluttering the interface.
You've seen them everywhere—hover over a button icon and text explains what it does.
When to Use Tooltips
- Icon labels - Explaining what icon buttons mean
- Form field hints - Clarifying what input is expected
- Feature explanations - Brief descriptions of functionality
- Abbreviations - Expanding acronyms or technical terms
- Data points - Additional details on charts and graphs
Tooltip Anatomy
| Component | Purpose |
|---|---|
| Trigger element | What users hover over |
| Tooltip content | The helpful text |
| Arrow/pointer | Shows what the tooltip relates to |
| Delay | Brief pause before appearing (prevents flicker) |
Best Practices
Keep It Short
Tooltips should be a sentence or two at most. If you need more space, use a different pattern.
Don't Hide Essential Information
Critical information shouldn't be locked behind a hover. If users need to know it, show it.
Consider Touch Devices
Hover doesn't work on mobile. Ensure tooltips are triggered by tap and can be dismissed easily.
Position Intelligently
Tooltips should appear where there's space and not get cut off by screen edges.
Accessibility Considerations
Screen readers need tooltips to be properly coded with ARIA attributes. The tooltip content should be accessible to keyboard users, not just mouse users.