Tooltip

A floating element that displays informative text when triggered by hover, focus, or click. Supports variants, sizes, arrows, controlled state, and positioning options.

Examples

Basic

<Tooltip trigger={<HelpCircle  />} title="Basic tooltip title" />

With Arrow

<Tooltip trigger={<HelpCircle  />} title="Tooltip with arrow" arrow={true} />

Positioning

<Tooltip trigger={<HelpCircle />} title="Tooltip on top" side="top" />
<Tooltip trigger={<HelpCircle />} title="Tooltip on right" side="right" />
<Tooltip trigger={<HelpCircle />} title="Tooltip on bottom" side="bottom" />
<Tooltip trigger={<HelpCircle />} title="Tooltip on left" side="left" />
<Tooltip trigger={<HelpCircle />} title="Aligned start" side="top" align="start" />
<Tooltip trigger={<HelpCircle />} title="Aligned end" side="top" align="end" />

API Reference

All props are specific to the Tooltip component.

Props	Type	Default	Description
trigger	ReactNode	—	Element that triggers the tooltip.
title	string	—	The tooltip title.
side	"top" \| "right" \| "bottom" \| "left"	"top"	Side of the trigger to position the tooltip.
align	"start" \| "center" \| "end"	"center"	Alignment relative to the trigger.
sideOffset	number	6	Offset distance from the trigger element.
alignOffset	number	0	Offset along the alignment axis.
arrow	boolean	false	Whether to display the arrow.
variant	"default" \| "secondary" \| "outline"	"default"	Visual style of the tooltip.
size	"sm" \| "md" \| "lg"	"sm"	Size of the tooltip title and arrow.
maxWidth	"xs" \| "sm" \| "md" \| "lg" \| "none"	"xs"	Maximum width of the tooltip title.
delayDuration	number	300	Delay before showing the tooltip in milliseconds.
closeDelay	number	0	Delay before closing the tooltip in milliseconds.
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Initial open state for uncontrolled tooltip.
onOpenChange	(open: boolean) => void	—	Callback fired when tooltip open state changes.
contentClassName	string	-	Custom classes applied to the tooltip title.