# 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](/docs/overlay-lifecycle).

## Examples

### Compound parts

Compose Trigger and Popup.

```tsx
import { Button, Tooltip } from '@var-ui/react';

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

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### SimpleTooltip preset

`SimpleTooltip` keeps the assembled 80% case copy-pasteable.

```tsx
import { Button, SimpleTooltip } from '@var-ui/react';

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

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Placement and delay

Set `placement` relative to the trigger and `delay` (ms) before open. Default delay is 500ms. This demo uses the `SimpleTooltip` preset.

```tsx
import { Button, SimpleTooltip } from '@var-ui/react';

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

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  |  |
| defaultOpen | boolean \| undefined | no |  |  |
| delay | number \| undefined | no | 500 | Delay before the tooltip opens, in milliseconds. |
| isOpen | boolean \| undefined | no |  |  |
| onOpenChange | OverlayOpenChangeHandler \| undefined | no |  |  |
| portalContainer | Element \| undefined | no |  | Element the tooltip portals into instead of `document.body`. Needed when a subtree renders under a different theme than the page ambient. |

## 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.