Skip to content
Overlay

Tooltip

Short hint shown on hover or focus.

React source Core source

Tooltip

Brief hint shown on hover or focus of a single trigger. Prefer tooltips for supplemental labels — not essential instructions. Tooltip is the compound Root (Tooltip.Trigger / Tooltip.Popup). The trigger child must forward DOM props — there is no render prop. For the previous content / placement / delay API, use the SimpleTooltip preset.

State attributes, positioner CSS variables, and onOpenChange details are documented in Overlay lifecycle.

Examples

Compound parts

Compose Trigger and Popup.

Demo.tsxtsx
import { Button, Tooltip } from '@var-ui/react';

<Tooltip>
  <Tooltip.Trigger>
    <Button>Save</Button>
  </Tooltip.Trigger>
  <Tooltip.Popup>Save changes</Tooltip.Popup>
</Tooltip>

SimpleTooltip preset

SimpleTooltip keeps the assembled 80% case copy-pasteable.

Demo.tsxtsx
import { Button, SimpleTooltip } from '@var-ui/react';

<SimpleTooltip content="Save changes">
  <Button>Save</Button>
</SimpleTooltip>

Placement and delay

Set placement relative to the trigger and delay (ms) before open. Default delay is 500ms. This demo uses the SimpleTooltip preset.
Demo.tsxtsx
import { Button, SimpleTooltip } from '@var-ui/react';

<SimpleTooltip content="Below the trigger" placement="bottom" delay={200}>
  <Button intent="secondary">Bottom · 200ms</Button>
</SimpleTooltip>

Props

Accessibility

Tooltips appear on hover and keyboard focus. Keep copy short; do not put interactive content in a tooltip (use HoverCard or Popover instead). The trigger must already have an accessible name — tooltips supplement, they do not replace labels.