Tooltip
A 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