Tooltip

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

On this page

Props

content

placement

hideArrow

<Tooltip>
  <Button>Hover me</Button>
  <TooltipContent>Tooltip content</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>

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'`
	`RefObject<Element \| null>`	`—`

Last updated on 6/16/2026