Tooltip

Floating label that appears near a trigger element. Supports 12 placements, hover / click / focus triggers, custom colors, and controlled open state.

Playground

Content

placement

trigger

arrow

disabled

<Tooltip
  title="This is a tooltip"
>
  <Button variant="secondary">Hover me</Button>
</Tooltip>

12 placement options: top, bottom, left, right, each with left-aligned, centered, and right-aligned variants.

Use trigger='hover' (default), 'click', or 'focus'.

Pass any CSS color to the color prop to override the default dark background.

Set arrow={false} to hide the directional pointer.

title accepts any ReactNode. Pass JSX for multi-line or structured tooltips.

Use open + onOpenChange for full control over visibility.

API

Property	Type	Default	Description
`title`*	`ReactNode`	—	Tooltip content. Set to null/undefined to disable.
`placement`	`"top" \| "topLeft" \| "topRight" \| "bottom" \| "bottomLeft" \| "bottomRight" \| "left" \| "leftTop" \| "leftBottom" \| "right" \| "rightTop" \| "rightBottom"`	"top"	Placement relative to the trigger element.
`trigger`	`"hover" \| "click" \| "focus" \| TooltipTrigger[]`	"hover"	How to activate the tooltip.
`open`	`boolean`		Controlled open state.
`defaultOpen`	`boolean`	false	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`		Called when visibility changes.
`color`	`string`		Custom background and arrow color (any CSS color).
`arrow`	`boolean`	true	Show the directional arrow.
`mouseEnterDelay`	`number`	100	Delay before showing in milliseconds.
`mouseLeaveDelay`	`number`	100	Delay before hiding in milliseconds.
`disabled`	`boolean`	false	Disable the tooltip entirely.
`overlayClassName`	`string`		Extra class on the floating overlay.