<Tooltip>
<Button>
<SquarePenIcon />
</Button>
<TooltipContent>
Create new issue <Kbd>C</Kbd>
</TooltipContent>
</Tooltip>npx shadcn@latest add @dotui/tooltipUse 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>Use the controls below to experiment with different tooltip props and see the live preview and code update.
<Tooltip>
<Button>Hover me</Button>
<TooltipContent placement="top">Tooltip content</TooltipContent>
</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' | ||
A tooltip displays a description of an element on hover or focus.
| Prop | Type | Default | |
|---|---|---|---|
boolean | false | ||
RefObject<Element | null> | — | ||
boolean | — | ||
boolean | — | ||
Element | document.body | ||
Placement | 'top' | ||
number | 0 | ||
ReactNode | function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.