Tooltip
View on StorybookStorybookA popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.
Preview
Installation
Setup
Wrap your app with TooltipProvider in your root layout:
Usage
Examples
Basic Tooltip
tsx
Different Sides
tsx
With Icon Buttons
tsx
RTL Support Example
The Tooltip component automatically adapts to RTL layouts. Positioning mirrors correctly and content flows naturally.
LTR (English)
RTL (العربية)
Props
| Name | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "top" | Which side to display the tooltip |
sideOffset | number | 4 | Distance from the trigger in pixels |
align | "start" | "center" | "end" | "center" | Alignment relative to the trigger |
delayDuration | number | 700 | Delay in ms before tooltip appears (set on TooltipProvider) |
Accessibility
Keyboard Navigation
Tooltip appears on focus and hover. Use Tab to navigate.
Screen Readers
Tooltip content is announced when the trigger receives focus using aria-describedby.
Best Practice
Always use tooltips for supplementary information, not critical content.
RTL Support
The Tooltip component automatically adapts to RTL layouts.
Key RTL Features:
- Tooltip positioning mirrors automatically (left ↔ right)
- Text alignment follows the direction
- Animations work correctly in both directions
Use Cases
Icon button descriptions
Truncated text full-value reveal
Keyboard shortcut hints
Disabled element explanations
Best Practices
Do
- ✓ Keep tooltip text short (1-2 lines maximum)
- ✓ Show on hover/focus with a slight delay
- ✓ Use for supplementary info, not essential content
Don't
- ✗ Don't put interactive elements inside tooltips — use Popover
- ✗ Don't use for error messages or validation feedback
- ✗ Don't rely on tooltips for mobile — they lack hover