Tooltip Popover Patterns

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

dragoon0x 1f4df2d 954 B Updated

File contents

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.

dragoon0x/everything-design-taste/tree/main/skills/tooltip-popover-patterns commit 1f4df2d4f1

Frequently asked questions

npx skillmds@latest add dragoon0x/tooltip-popover-patterns