Tooltips provide brief, contextual information when users hover or focus on an element. Essential for icon-only buttons and truncated text.
| Position | Use |
|---|
| Top | Default, most common |
| Bottom | When top is blocked |
| Left | Narrow containers |
| Right | Sidebar items |
| Trigger | Description |
|---|
| Hover | Show after 300ms delay |
| Focus | Show immediately on keyboard focus |
| Click | For mobile, tap to toggle |
- Max width: 240px
- Max length: 1–2 short sentences
- Don’t: Put critical info only in tooltips
- Do: Use for icon labels, abbreviations, truncated text
- Short & helpful — tooltips are not documentation
- Don’t repeat visible text — add context, not duplication
- Escape dismisses — pressing ESC hides tooltip