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