Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Demo

Import the parts you need from the component's folder.

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip";

Anchor on top, right, bottom, or left with the side prop.

Combine text with Kbd to hint a shortcut.

Wrap a disabled control in a span so the tooltip still triggers.

Prop	Type	Default	Description
`delayDuration`	`number`	`700`	Hover delay before showing.
`skipDelayDuration`	`number`	`300`	Window during which the next tooltip skips the delay.

Prop	Type	Default	Description
`open`	`boolean`	—	Open state. Supports v-model:open.

Event	Description
`update:open`	Fires when the tooltip shows or hides.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto the child element.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Anchor side.
`sideOffset`	`number`	`4`	Gap from the trigger in px.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Moving focus onto the trigger shows the tooltip.
`Esc`	Dismisses the tooltip while it is open.