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

<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

<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

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
content*	ReactNode	—
children*	ReactElement	—
side	"top" \| "right" \| "bottom" \| "left"	—
delayDuration	number	—
tone	"auto" \| "dark" \| "light"	—
className	string	—

* required