Tooltip

Overlay

Shows a short description when the user hovers or focuses an element.

npx shadcn@latest add tooltip

Default

Wrap a TooltipProvider around your app once to share config.

Preview

Live

tsx

1<TooltipProvider>
2  <Tooltip>
3    <TooltipTrigger render={<Button variant="outline">Hover me</Button>} />
4    <TooltipContent>Add to your library</TooltipContent>
5  </Tooltip>
6</TooltipProvider>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
side	"top" \| "right" \| "bottom" \| "left"= "top"	The preferred side of the trigger the tooltip appears on.
sideOffset	number= 6	Distance in pixels between the tooltip and its trigger.