Overlays

Tooltip

Deletes the largest file in v0 — three state variables, four refs, three effects, hand-rolled viewport clamping and a manually managed portal container. The trigger wraps your element rather than cloning props onto it.

data-scope="tooltip"

What you get for free

Anchor positioning with collision handling
Open/close delays with a shared group timer
Correct aria-describedby wiring

Usage

ReactVueSvelteAngular

<Tooltip title="Copy to clipboard" placement="top">
  <Button icon="copy" aria-label="Copy" />
</Tooltip>

<Tooltip content="Copy to clipboard" placement="top">
  <Button icon="copy" aria-label="Copy" />
</Tooltip>

<Tooltip content="Copy to clipboard" placement="top">
  <Button icon="copy" aria-label="Copy" />
</Tooltip>

<ck-tooltip content="Copy to clipboard" placement="top">
  <button ckButton icon="copy" aria-label="Copy"></button>
</ck-tooltip>

Props

Prop	Type	Default	Notes
`title`	ReactNode	—	React firstThe tooltip text. An empty one never opens, so `title={row.note}` is safe without a conditional around it.
`content`	ReactNode	—	Not in ReactTooltip body. v2 React: `title`.
`placement`	Placement \| PlacementAlias	`"top"`	Accepts the canonical names and all twelve camelCase ones (topLeft, rightBottom, …).
`trigger`	"hover" \| "focus" \| "click" \| Array<…>	`["hover", "focus"]`	React firstFocus is in the default because a tooltip only a pointer can reach is not a tooltip.
`mouseEnterDelay`	number	`0.1`	React firstSECONDS, not milliseconds.
`mouseLeaveDelay`	number	`0.1`	React firstSECONDS. Also the window in which moving onto the popup keeps it open.
`openDelay`	number	—	Not in Reactv0: showDelay. v2 React: mouseEnterDelay.
`closeDelay`	number	—	Not in Reactv0: hideDelay. v2 React: mouseLeaveDelay.
`open`	boolean	—	Controlled. v0: visible.
`disabled`	boolean	`false`	Never opens.
`color`	string	—	React firstAny CSS colour. Drives the box and its arrow from one value.
`overlayClassName`	string	—	React firstClass on the popup rather than the trigger.
`contentClassName`	string	—	Not in ReactClass on the content. v0: overlayClassName. v2 React: overlayClassName.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop. The marked rows are the exception, and a temporary one, in both directions: React first exists in React while the other three adapters catch up, and Not in React is the prop it replaced, still live everywhere else.

Migrating from react-ui-toolkit

v0	v1	Notes
`visible`	`open`
`showDelay / hideDelay`	`openDelay / closeDelay`
`overlayClassName`	`contentClassName`
`contentClassName`	`overlayClassName`	React only, and back to the name v0 had: the prop names the popup, and `content` is what goes in it.
`content`	`title`	React only. Frees `content` for Popover, where a title and a body are different things.
`cloneElement onto your trigger`	`a wrapper element with display: inline-flex`	The trigger handlers are pointerenter/pointerleave and focus/blur — none of which bubble — so a box-less wrapper would have worked in React and silently failed everywhere else.