tooltip-popover-patterns
Installation
SKILL.md
Tooltip Popover Patterns
Tooltips vs Popovers
| Feature | Tooltip | Popover |
|---|---|---|
| Trigger | Hover/focus | Click/tap |
| Content | Short text (1-2 lines) | Rich content, links, actions |
| Dismissal | On mouse leave | Click outside or X button |
| Mobile | Doesn't work well (no hover) | Works with tap |
Tooltip Rules
- Delay: 300-500ms before showing. Prevents flicker on accidental hover.
- Dismiss: immediately on mouse leave.
- Position: above by default, auto-flip to avoid viewport edges.
- Arrow pointing to trigger element.
- Max width: 200-280px.
- Never put interactive content in tooltips.