<Tooltip>
<Button>
<SquarePenIcon />
</Button>
<TooltipContent>
Create new issue <Kbd>C</Kbd>
</TooltipContent>
</Tooltip>pnpm dlx 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.
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 | |
|---|---|---|---|
| — | ||
| | ||
| | ||
| | ||
A tooltip displays a description of an element on hover or focus.
| Prop | Type | Default | |
|---|---|---|---|
| | ||
| — | ||
| — | ||
| — | ||
| | ||
| | ||
| | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(Tooltip)>
<Dynamic(Button)>Hover me</Dynamic(Button)>
<Dynamic(TooltipContent) placement="top">Tooltip content</Dynamic(TooltipContent)>
</Dynamic(Tooltip)>