Tooltip
A small popup that displays informative text when users hover over or focus on an element, providing additional context without cluttering the interface.
Basic Example
Positions
With Icons
Delay Duration
Instant (0ms delay)
Default (200ms delay)
Slow (500ms delay)
Without Arrow
Composable API
Props
| Name | Type | Default | Description |
|---|---|---|---|
content* | string | - | Tooltip text content |
children* | ReactElement | - | Trigger element |
side | 'top' | 'bottom' | 'left' | 'right' | 'top' | Position relative to trigger |
align | 'start' | 'center' | 'end' | 'center' | Alignment relative to trigger |
delayDuration | number | 200 | Delay before showing (ms), range 0-2000 |
showArrow | boolean | true | Whether to show arrow pointer |
open | boolean | - | Controlled open state |
onOpenChange | (open: boolean) => void | - | Open state change handler |
Composable Parts
| Component | Description |
|---|---|
| TooltipProvider | Global provider for optimal performance |
| TooltipRoot | Root container component |
| TooltipTrigger | Trigger element wrapper |
| TooltipContent | Content container with positioning |
| Tooltip | Convenience wrapper component |
Usage Guidelines
When to use
- •To provide supplementary information about an element without cluttering the interface
- •For icon-only buttons that need text labels for clarity
- •To show full text when displaying truncated content
- •For keyboard shortcuts or additional context about an action
Best practices
- •Keep tooltip text concise and informative (ideally under 10 words)
- •Use tooltips for supplementary information only - never for critical content
- •Position tooltips to avoid covering related content or actionable elements
- •Ensure tooltip triggers are keyboard-accessible for screen reader users
- •Use global TooltipProvider for better performance with multiple tooltips
Accessibility
- •Uses aria-describedby to associate tooltip with trigger element
- •Keyboard accessible - focus triggers tooltip, Escape key closes it
- •Works with both mouse hover and keyboard focus
- •Respects prefers-reduced-motion for animations
- •Automatically adjusts positioning to stay within viewport
Do's and Don'ts
✓ Do
- •Use concise, helpful text that adds value
- •Provide tooltips for icon-only buttons
- •Show keyboard shortcuts in tooltips
- •Use appropriate delay duration for context
✗ Don't
- •Use tooltips for critical information or actions
- •Include long paragraphs or complex content
- •Repeat visible text exactly in tooltip
- •Use tooltips on mobile without touch consideration
Related Components
Popover
For interactive content and complex information
Button
Common trigger element for tooltips
Badge
Use with tooltips to provide additional context