Tooltip

Hover/focus tooltip with collision flipping and a shared warm-up — neighbours open instantly once one has shown.

5 files · 283 locdeps: clsx, tailwind-merge

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/tooltip.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs tooltip

Usage

import { Tooltip } from "@/components/opus/ui/tooltip";

<Tooltip content="Copy to clipboard">
  <Button size="icon" variant="ghost">…</Button>
</Tooltip>

API

Prop	Type	Default	Description
content	ReactNode	—	Tooltip body.
side	"top" \| "right" \| "bottom" \| "left"	"top"	Preferred side; flips if it would overflow.
align	"start" \| "center" \| "end"	"center"	Alignment along the side.
delay	number	450	Hover delay (ms). Keyboard focus opens instantly.

← PreviousSheet Next →Popover