Tooltip

Display information on hover or focus.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/tooltip.json

Usage


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


<Tooltip>
  <TooltipTrigger>Hover me</TooltipTrigger>
  <TooltipContent>
    {/* Content */}
  </TooltipContent>
</Tooltip>

You're viewing Tooltip—a label that shows on hover or focus. Use it when the content is supplementary and non-essential, and you're okay with touch users not having access.

The trigger has its own purpose and the popup is supplementary.
The content is non-essential—nice-to-have clarity for sighted mouse/keyboard users.
You're okay with touch users not seeing it—tooltips only open on hover/focus, not on tap.
The content is short and non-interactive (no links or buttons inside).

Hover or focus only — Opens on hover/focus; touch users cannot access it.
Non-interactive — Keep content short with no links or buttons.
Supplementary — Best for nice-to-have information, not critical content.

The trigger's primary purpose is to reveal the content.
The content is essential and should be accessible to touch users and screen readers.
You need click-to-open so everyone can access it.
The content may be interactive (links, buttons).

Positioning

Use the positioning prop to change the position of the tooltip.

Examples

With Keyboard Shortcut

Disabled Button

Show a tooltip on a disabled button by wrapping it with a span.

API Reference

Root component that wraps the tooltip. Manages open state and positioning.

Prop	Type	Default
`positioning`	`PositioningOptions`	`{ placement: "top" }`
`openDelay`	`number`	`0`
`closeDelay`	`number`	`100`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`open`	`boolean`	-
`defaultOpen`	`boolean`	-
`onOpenChange`	`(details: OpenChangeDetails) => void`	-
`disabled`	`boolean`	-
`interactive`	`boolean`	`false`
`closeOnClick`	`boolean`	`true`
`closeOnEscape`	`boolean`	`true`
`closeOnPointerDown`	`boolean`	`true`
`closeOnScroll`	`boolean`	`true`

TooltipTrigger

Element that shows the tooltip on hover or focus. Button by default; use asChild for custom elements.

Prop	Type	Default
`asChild`	`boolean`	-

TooltipContent

Tooltip content shown in a popover on hover or focus.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

TooltipArrow

Optional arrow pointing to the trigger. Place inside TooltipContent.

Prop	Type	Default
`asChild`	`boolean`	-

Attribute	Default
`--arrow-background`	`var(--foreground)`
`--arrow-size`	`calc(1.5 * var(--spacing))`

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Tooltip vs Toggle Tooltip Use Tooltip when Tooltip behavior Consider Toggle Tooltip when Positioning Examples With Keyboard Shortcut Disabled Button API Reference Tooltip TooltipTrigger TooltipContent TooltipArrow