Tooltip

A popup that displays additional information when hovering over an element. Supports configurable placement, offset, and an optional arrow indicator.

$npx shadcn add @patchui/tooltip

Basic

Sides

With Arrow

Usage

import { Button, Tooltip, TooltipProvider } from "@patchui/react";
 
// Wrap tooltips in a provider for shared delay behavior
<TooltipProvider>
  {/* Basic tooltip */}
  <Tooltip content="Helpful information">
    <Button>Hover me</Button>
  </Tooltip>
 
  {/* With arrow and custom side */}
  <Tooltip content="Save your changes" side="bottom" arrow>
    <Button>Save</Button>
  </Tooltip>
</TooltipProvider>

Props

Tooltip

Prop	Type	Default	Description
content	ReactNode	-	The text or content to display in the tooltip.
children	ReactElement	-	The trigger element that activates the tooltip on hover.
side	"top" \| "bottom" \| "left" \| "right"	"top"	Which side of the trigger the tooltip appears on.
sideOffset	number	4	Distance in pixels between the tooltip and trigger.
arrow	boolean	false	Whether to render a directional arrow pointing at the trigger.
className	string	-	Additional CSS classes applied to the tooltip popup.

TooltipProvider

Prop	Type	Default	Description
delay	number	300	Milliseconds to wait before opening a tooltip.
closeDelay	number	0	Milliseconds to wait before closing a tooltip.
timeout	number	400	If a tooltip was recently closed, the next one opens instantly within this timeout (ms).

Notes

TooltipProvider: Wrap multiple tooltips in a TooltipProvider for shared delay behavior - hovering between adjacent tooltips opens them instantly.
Hover activation: Tooltips appear on mouse hover and keyboard focus, after the configured delay.
Portal rendering: The tooltip renders outside the DOM tree via a portal, avoiding overflow clipping.
Arrow indicator: Set arrow to render a small triangle pointing from the tooltip to the trigger element.