Tooltip

A tooltip displays a description of an element on hover or focus.

<Tooltip>
  <Button variant="default">Hover me</Button>
  <TooltipContent>Add to library</TooltipContent>
</Tooltip>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/tooltip

Usage

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>

Playground

Use the controls below to experiment with different tooltip props and see the live preview and code update.

content

placement

hideArrow

<Tooltip>
  <Button>Hover me</Button>
  <TooltipContent placement="top">Tooltip content</TooltipContent>
</Tooltip>

Examples

Learn more

API Reference

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'`
	`DOMRenderFunction<"div", TooltipRenderProps>`	`—`
	`RefObject<Element \| null>`	`—`

Last updated on 5/22/2026