Tooltip

Transient hint on hover/focus. One bubble travels between triggers and sticks to its anchor through scroll.

One bubble travels between triggers - hover the pair and watch it glide. Pin the first one and it holds with no pointer on it.

Install Tooltip

1. New project? One command installs the package and wires everything - see Installation:

bash
pnpm dlx zyncat-ui init

2. Import the component - it loads its own stylesheet:

tsx
import { Tooltip } from '@zyncat/ui/tooltip';

Usage

tsx
import { Tooltip } from '@zyncat/ui/tooltip';
 
<Tooltip content="Schedule post to queue" shortcut="⌘S">
  <Button variant="secondary">Schedule</Button>
</Tooltip>

Compose Tooltip in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.

Tooltip props

Tooltip

PropTypeDefaultDescription
content*ReactNode—The hint - a string or small node; never interactive content.
shortcutstring | null—Optional keyboard hint, rendered as mono metadata ("⌘↩", "S").
placementPlacement—Preferred side; flips automatically when out of viewport room.
openboolean—Controlled visibility - shows with no hover or focus, and stays until you clear it. Omit to stay uncontrolled. One bubble shows at a time: the newest wins, and the ones under it come back when it leaves.
defaultOpenboolean—Initial state when uncontrolled. Default false.
onOpenChange(open: boolean) => void—Fires whenever hover, focus, or Escape asks for a new state. Pair with `open` for controlled use.
disabledboolean—Suppress the tooltip entirely (trigger renders untouched).
openDelaynumber—ms before a cold hover shows; warm hovers + focus are instant. Default 350.
closeDelaynumber—ms the bubble lingers after leaving (bridges moving to a neighbour). Default 140.
idstring—Stable id for this trigger's store entry - lets overlapping triggers race safely under the one shared tooltip host. Not rendered to the DOM. Auto-generated when omitted.
children*ReactElement—Exactly one element.
...htmlAttributesHTMLAttributes<HTMLSpanElement> & DataAttributes—Standard <span> attributes forwarded to the anchor wrapper.
Set in Geist & Newsreader — animated by the house engineZyncat UI · Rev 0.11 · MIT · Built by Tabsir Ahammed · Source on GitHub