Tooltips
Our tooltip components provide brief, contextual information on hover or focus, enhancing user understanding without cluttering the interface.
Basic Tooltips
Simple tooltip examples with different trigger elements
Tooltip Positions
Tooltips can be positioned in different directions
Table Hover Example
Hover over different elements in the table to see contextual tooltips
Try hovering over the table elements below to see tooltips in action!
Dashboard Metrics Table
Metric | Current Value | Trend | Status |
|---|---|---|---|
| Active Users | 12,847 | +12.5% | Healthy |
| Revenue | $89,234 | -3.2% | Warning |
| Conversion Rate | 4.7% | +8.1% | Excellent |
Rich Content Tooltips
Tooltips can contain more complex content and formatting
Connected
Best Practices
Guidelines for effective tooltip usage
✓ Do
- • Keep content concise and helpful
- • Use for additional context or explanations
- • Position appropriately to avoid covering content
- • Include keyboard accessibility
- • Use consistent timing and behavior
✗ Don't
- • Use for critical information
- • Make content too long or complex
- • Use for mobile-only interfaces
- • Repeat visible text exactly
- • Use for primary navigation