<Tooltip>
<Button>Hover me</Button>
<TooltipContent>Tooltip content</TooltipContent>
</Tooltip>Installation
npx shadcn@latest add @dotui/tooltipUsage
Use tooltips to provide contextual information about an element when it receives focus or the user hovers over it.
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent } from '@/components/ui/tooltip'<Tooltip>
<Button>Hover me</Button>
<TooltipContent>Tooltip content</TooltipContent>
</Tooltip>Anatomy
Tooltip wraps a focusable trigger (any element that takes focus, like a Button or Link) and a TooltipContent. The trigger opens the tooltip on hover or focus.
import { Tooltip, TooltipContent } from '@/components/ui/tooltip'
;<Tooltip>
<Button />
<TooltipContent />
</Tooltip>Delay
Tooltip opens after a delay (default 700ms) on hover and closes after closeDelay (default 0) when the pointer leaves.
<Tooltip delay={0} closeDelay={200}>
<Button>Hover me</Button>
<TooltipContent>Opens instantly</TooltipContent>
</Tooltip>Open state
Use defaultOpen for uncontrolled open state, or isOpen with onOpenChange to control it.
<Tooltip isOpen={isOpen} onOpenChange={setIsOpen}>
<Button>Hover me</Button>
<TooltipContent>Controlled</TooltipContent>
</Tooltip>Examples
Basic Tooltip
With Keyboard Shortcut
Formatted Content
API Reference
Tooltip
TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip relative to the trigger.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
number | 1500 | ||
number | 500 | ||
"focus" | "hover" | 'hover' | ||
boolean | true | ||
TooltipContent
A tooltip displays a description of an element on hover or focus.
| Prop | Type | Default | |
|---|---|---|---|
boolean | false | ||
Element | document.body | ||
number | 0 | ||
ReactNode | function | — | ||
boolean | — | ||
boolean | — | ||
Placement | 'top' | ||
RefObject<Element | null> | — | ||
Last updated on 7/7/2026