Tooltip

interactive

Concise hover and focus help with role="tooltip", trigger wiring through aria-describedby, side placement, optional delay, and render-prop control support.

Preview

Usage

import { Tooltip } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<Tooltip
  content="Exports the current filtered result set as a CSV file."
  placement="bottom"
>
  {(triggerProps) => (
    <button type="button" {...triggerProps}>
      Export CSV
    </button>
  )}
</Tooltip>

Props

Prop	Type	Default	Description
`content`	`JSX.Element`	required	Tooltip body content
`children`	`JSX.Element \| (triggerProps) => JSX.Element`	required	Trigger content, or render function that spreads trigger props onto a control
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Preferred tooltip side
`delay`	`number`	`120`	Show delay in milliseconds
`id`	`string`	generated	Stable tooltip id
`disabled`	`boolean`	`false`	Disables tooltip behavior and `aria-describedby`
`class`	`string`	--	Additional classes on the root wrapper
`tooltipClass`	`string`	--	Additional classes on the tooltip bubble

Accessibility

ARIA: Tooltip bubble uses role="tooltip". Enabled triggers receive aria-describedby pointing at the bubble id.
Keyboard: The fallback trigger is focusable with tabindex="0". Render-prop usage lets native controls keep their own keyboard semantics.
Visibility: Tooltip opens on hover and focus, then hides on pointer leave, blur, or Escape.
Delay: Use a small delay for incidental help. Set delay=0 only when immediate feedback is important in demos or tests.

Do / Don't

Do

Use Tooltip for short, nonessential help that clarifies a nearby label, icon, or control.

Don't

Don't put required instructions, errors, or interactive controls inside a tooltip.