Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

$ npx shadcn@latest add "/r/tooltip.json"

The tooltip can be positioned on different sides of the trigger using the side prop.

The sideOffset prop can be used to adjust the distance between the trigger and the content.

Prop	Type	Default	Description
delay	`number`	`200`	The duration from when the mouse enters a trigger until the tooltip opens.
skipDelayDuration	`number`	`300`	How much time a user has to enter another trigger without again waiting for the delay.

Prop	Type	Default	Description
open	`boolean`	-	The open state of the tooltip.
defaultOpen	`boolean`	-	The initial open state.
onOpenChange	`(open: boolean) => void`	-	Callback for when the open state changes.

Prop	Type	Default	Description
side	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	The preferred side of the anchor to render against when open.
sideOffset	`number`	`10`	The distance in pixels from the anchor.
className	`string`	-	Additional CSS classes to apply to the content.