Tooltips & Popovers
Tooltips and popovers are overlay UI components for supplementary information. Tooltip = explain; popover =
interact. Tooltips are supplementary; popovers support task completion.
Choose the right pattern
| Pattern |
Trigger |
Interactive |
Use when |
| Tooltip |
Hover / focus |
No |
1–2 lines of explanation; icon-only control labels |
| Popover |
Click |
Yes |
Small forms, toggles, or actions without leaving context |
| Bubble |
Click |
Yes |
Card-like panel with arrow; richer layout than a plain popover |
| Dialog |
Click |
Yes |
Blocking decision or task that needs full attention |
Tooltips
| Aspect |
Guidance |
| Trigger |
Hover (mouse) / focus (keyboard) |
| Delay |
300–500ms before show |
| Dismiss |
Blur or mouse leave |
| Content |
1–2 lines plain text; sentence case |
| Use when |
Icon-only controls, terminology, truncated text, non-essential guidance |
Popovers
| Aspect |
Guidance |
| Trigger |
Click |
| Dismiss |
Outside click or explicit close |
| Content |
Structured layout; may include buttons, inputs, links |
| Use when |
Inline config, secondary actions, interactive contextual help |
Visual design
| Aspect |
Tooltip |
Popover |
| Size |
Compact overlay |
Larger, card-like surface |
| Tooltip background (light) |
Black at 90% opacity, white text |
— |
| Tooltip background (dark) |
#2F343A at 90% opacity, white text |
— |
Examples