Feedback
Tooltip
Tooltip is a small, contextual popup that appears when you hover over, tap or focus on a UI element (like a button or icon).
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features10 checks
- role="tooltip" for proper semantic identification
- aria-describedby linking trigger to tooltip content
- Keyboard accessible, shows on focus, hides on blur
- Mouse accessible, shows on hover, hides on mouse leave
- Sufficient color contrast (white text on dark background)
- Dismissible with Escape key
- Does not obscure critical interface elements
- Content remains accessible when tooltip is hidden
- No time limits for reading tooltip content
- Touch device support with tap to show/hide
When to use this component
✓Do's
- •Supplementary info on hover/focus
- •Icon-only button labels
- •Truncated text full display
- •Brief explanations of UI elements
✗Don'ts
- •For essential information, display it directly.
- •For interactive content, use a popover.
- •For longer or more detailed content, use a popover or modal.
- •For mobile-first interfaces, avoid relying on Tooltips as hover interactions are not available.
Do's and Don'ts
✓ Do's
Delete application
Use tooltips for supplementary info on icon-only buttons and truncated text.
✗ Don'ts
Don't put essential information in tooltips, they require hover and are invisible on mobile.