Tooltip
Overlay
Feedback
Contextual information overlays on hover or focus.
Preview
Simple tooltip on hover
Icon Tooltips
Tooltips on icon buttons
Position Variants
Tooltip positioning options
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'top' | 'right' | 'bottom' | 'left' | 'top' | Tooltip position |
align | 'start' | 'center' | 'end' | 'center' | Alignment relative to trigger |
sideOffset | number | 4 | Distance from trigger in pixels |
delayDuration | number | 200 | Delay before showing (ms) |
Usage
Import and implementation examples
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { Button } from '@/components/ui/button'
// Wrap your app or component with TooltipProvider
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="inverse">Hover me</Button>
</TooltipTrigger>
<TooltipContent>
<p>Tooltip content</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
// With position
<Tooltip>
<TooltipTrigger asChild>
<Button>Right Tooltip</Button>
</TooltipTrigger>
<TooltipContent side="right">
<p>Appears on the right</p>
</TooltipContent>
</Tooltip>
// Icon button tooltip
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon">
<Settings className="w-5 h-5" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Open settings</p>
</TooltipContent>
</Tooltip>Features
Built-in functionality
- Hover & focus: Shows on mouse hover and keyboard focus
- 4 positions: Top, right, bottom, left
- Smart positioning: Auto-adjusts to stay in viewport
- Customizable delay: Control show/hide timing
- Accessible: ARIA describedby for screen readers
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="tooltip" for tooltip contentaria-describedby linking to triggerProper focus managementKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Focus trigger to show tooltip |
| Escape | Close tooltip |
Notes
- Screen readers announce tooltip content
- Works with keyboard focus, not just hover
- Tooltip content is accessible