Tooltip
A Tooltip component is a small, informative pop-up that appears when a user hovers over or focuses on an element, such as a button or icon. It provides additional context or explanations about that element without cluttering the interface. Tooltips enhance user experience by offering helpful hints, instructions, or details, ensuring that information is accessible without overwhelming the layout.
# Demo
Basic Tooltip
Simple tooltip that appears on hover to provide additional context and information.
Icon Tooltips
Tooltips for icon-only buttons to explain their functionality and purpose.
Form Field Tooltips
Helpful tooltips for form fields to guide users and provide input instructions.
Status Indicator Tooltips
Status indicators with tooltips to explain current states and conditions.
Online
All systems operational
Maintenance
Scheduled downtime
Error
Service disruption
Unknown
Status checking
Navigation Tooltips
Navigation elements with tooltips to explain destinations and functionality.
Data Visualization Tooltips
Interactive data points with detailed tooltips showing metrics and insights.
Tooltip Best Practices
✅ Do's
- • Keep tooltip text concise and helpful
- • Use tooltips for icons and unclear elements
- • Provide additional context, not obvious information
- • Position tooltips to avoid blocking content
- • Use consistent timing for show/hide
- • Make tooltips accessible with keyboard navigation
- • Use appropriate contrast for readability
- • Include helpful instructions for form fields
❌ Don'ts
- • Don't use tooltips for critical information
- • Don't make tooltip text too long
- • Don't use tooltips on mobile (use alternative)
- • Don't repeat obvious button text
- • Don't use tooltips for complex interactions
- • Don't forget keyboard accessibility
- • Don't use tooltips for error messages
- • Don't make tooltips appear too quickly
Tooltip Interaction Summary
Recent Tooltip Interactions
0
Total Interactions
0
Unique Elements
0
Avg. Message Length
No tooltip interactions yet. Hover over elements above to see tooltips!
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| message | React.ReactNode | Required | Tooltip message or content. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| triggerClassName | string | ' ' | You can customise by passing tailwind classes. |
| children | React.ReactNode | Required | Tooltip trigger content. |
| placement | 'top' | 'bottom' | 'left' | 'right' | Optional | Placement of the tooltip. |
| delayShow | number | Optional | Delay in ms before showing. |
| delayHide | number | Optional | Delay in ms before hiding. |
| id | string | Optional | ID for accessibility. |
| ariaLabel | string | Optional | ARIA label for accessibility. |
| triggerProps | React.HTMLAttributes<HTMLElement> | Optional | Props for trigger element. |
| contentProps | React.HTMLAttributes<HTMLDivElement> | Optional | Props for content element. |
# Tags