Tooltip

Anchored hint that reveals descriptive text on hover or keyboard focus of a trigger.

import { Tooltip } from "@ps1ui/core";

Basic

<Tooltip content="Delete this row">
  <Button>Delete</Button>
</Tooltip>

Placement

<Tooltip content="tip" placement="bottom">
  <Button>bottom</Button>
</Tooltip>

Custom hover delay

<Tooltip content="Fires after a second of dwell" delay={1000}>
  <Button>slow</Button>
</Tooltip>

Props

Prop	Type	Default	Description
`content`*	`ReactNode`	—	Panel body. Rendered inside a `role="tooltip"` element while open.
`placement`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	Preferred edge to anchor against. The panel flips to the opposite edge when the preferred side would overflow the viewport.
`delay`	`number`	`200`	Milliseconds the pointer must dwell on the trigger before hover opens the panel. Focus opens immediately. Trigger mode only — in anchor mode the caller owns the open timing.
`onOpenChange`	`(open: boolean) => void`	—	Fired whenever the internal (or requested, when controlled) open state changes. Guaranteed to alternate `true`/`false`; no duplicate values. Never fires in anchor mode, where every transition originates from the caller.
`container`	`HTMLElement`	—	Element the panel is portaled into. Defaults to `document.body` so overlays escape the responsive-container context.
`children`	`ReactElement<TooltipTriggerProps, string \| JSXElementConstructor<any>>`	—	Single interactive element the panel anchors to. Cloned to receive a ref, `aria-describedby`, and the hover/focus/Escape handlers. Mutually exclusive with `anchor`.
`anchor`	`Element \| null`	—	DOM node to position the panel against, for callers that own their own trigger geometry and open state (e.g. the active cell of an SVG grid). Mutually exclusive with `children`, and requires a controlled `open`. The panel re-measures when this node changes identity, and on scroll/resize — the same triggers as a cloned child, so a node that moves in place without either is not tracked.
`open`	`boolean`	—	Controlled visibility. In trigger mode, setting it stops hover/focus from toggling state — they only invoke `onOpenChange`. Required in anchor mode.

All native <div> attributes are also accepted.