# Tooltip Popover Patterns

> Tooltip content, popover design, hover cards, and contextual information display.

- Skill: `dragoon0x/tooltip-popover-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/tooltip-popover-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/tooltip-popover-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/tooltip-popover-patterns

---


# 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.

## Popover Rules
- Close on click outside or Escape key.
- Focus trap if it contains interactive elements.
- Mobile: use bottom sheet instead of popover.
- Don't nest popovers.