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)