Tooltip

Short supplemental text on pointer hover or keyboard focus.

Interactive preview

Live specimenTry the component

Hover or focus the button to see supplemental help.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add tooltip

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Tooltip>
  <TooltipTrigger>Copy project ID</TooltipTrigger>
  <TooltipContent>Copies this project identifier.</TooltipContent>
</Tooltip>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`Root: delayDuration`	`number (ms)`	`500; keyboard focus is immediate`
`Root: open / defaultOpen / onOpenChange`	`boolean / boolean / (open: boolean) => void`	`uncontrolled, closed`
`Content: children`	`string`	`required, supplemental text only`
`Content: side / align`	`top \| right \| bottom \| left / start \| center \| end`	`top / center`
`Content: sideOffset / collisionPadding`	`number (px)`	`8 / 8`
`Trigger`	`ButtonProps and native button ref`	`secondary`

Accessibility

Keep a complete visible or accessible button name; a tooltip is supplemental description, never the only way to learn an essential action or error. Content accepts plain text only and never receives focus or contains interactive elements. Trigger merges the generated tooltip ID with existing aria-describedby values. Focus shows immediately; mouse/pen hover uses delayDuration, with a brief grace period and transparent pointer bridge to hover Content. Touch hover is ignored. Escape or trigger activation dismisses without moving focus; a dismissed tooltip waits for a fresh trigger entry or focus before reopening. Moving away closes after the grace period unless the trigger is still focused. The shared positioning follows resize/scroll, flips/clamps, and dismisses a clipped anchor. Controlled state stays consumer-owned. Root has no DOM/ref; Trigger ref targets its native button and Content a top-layer div with role=tooltip. Disabled native buttons cannot receive keyboard focus; put essential help in visible text rather than relying on their tooltip. No provider, interactive tooltip, or legacy popover polyfill is included.