Tooltip

Hover or focus label hint built on Radix Tooltip primitive with automatic positioning, arrow indicator, and theme tone overrides.

// Radix — @radix-ui/react-tooltip
import { Tooltip } from "@shavin/ui";

Sides

Component Source

<Tooltip content="Appears on top" side="top">
  <Button variant="outline">Top</Button>
</Tooltip>
<Tooltip content="Appears on the right" side="right">
  <Button variant="outline">Right</Button>
</Tooltip>
<Tooltip content="Appears on the bottom" side="bottom">
  <Button variant="outline">Bottom</Button>
</Tooltip>
<Tooltip content="Appears on the left" side="left">
  <Button variant="outline">Left</Button>
</Tooltip>

Delay duration

Component Source

<Tooltip content="Opens instantly" delayDuration={0}>
  <Button variant="outline">No delay</Button>
</Tooltip>
<Tooltip content="Opens after 700ms" delayDuration={700}>
  <Button variant="outline">Long delay</Button>
</Tooltip>

Tone — force a contrast regardless of theme

Component Source

const [tone, setTone] = useState("auto");

<Tooltip content={`tone="${tone}"`} tone={tone} delayDuration={0}>
  <Button variant="outline">Hover me</Button>
</Tooltip>

auto (default) follows the current theme's panel color. dark / light force a fixed contrast — e.g. a dark tooltip on a light page for visibility.

Props

Prop	Type	Default	Description
content*	ReactNode	—	Tooltip popover label content.
children*	ReactElement	—	Trigger element (must support forwardRef).
side	"top" \| "right" \| "bottom" \| "left"	top	Placement side (top, right, bottom, left). Default top.
delayDuration	number	300	Open delay duration in milliseconds. Default 300.
tone	"auto" \| "dark" \| "light"	auto	Color tone: auto (theme default), dark, or light. Default auto.
className	string	—	Optional custom CSS class name.

* required