Tooltip & Popover Patterns
Tooltips
- Purpose: Brief label or description for an element
- Trigger: Hover (desktop), long-press (mobile)
- Content: 1-2 lines max, plain text only
- Delay: Show after 300-500ms hover, hide immediately on mouse leave
- Position: Above the element by default, flip if near viewport edge
When to Use
- Explaining icon-only buttons
- Showing full text of truncated content
- Describing form fields with brief guidance
When NOT to Use
- Critical information (users may never hover)
- Rich content (links, images, forms)
- Mobile-primary interfaces (hover doesn't exist)
Popovers
- Purpose: Rich contextual content
- Trigger: Click (not hover)
- Content: Can include text, links, buttons, small forms
- Dismiss: Click outside, Escape key, or explicit close button
- Position: Near the trigger, within viewport
Hover Cards
- Preview content without navigating (user profiles, link previews)
- Show after 500ms hover delay
- Keep visible while hovering over the card itself
- Include a way to navigate to the full content
Accessibility
- Tooltips:
role="tooltip", aria-describedby on trigger
- Popovers:
role="dialog", focus trap, Escape to close
- Both: visible to screen readers, keyboard accessible
