Source: https://monarchui.dev/components/tooltip/

Components · Overlays

# Tooltip

Supplementary text on hover and focus.

@rookcom/monarch-react

Component

## On an icon button

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

Short supplementary text about a control, shown on hover and keyboard focus.

### Use when

- Naming or clarifying an icon-only control.

### Avoid when

- Essential information or interactive content: use Popover or visible text.

## Design principles

- Never put essential information or interactive content in a tooltip.
- Mount TooltipProvider once near the root so the open delay is shared.

## API reference

```tsx
import { Tooltip, TooltipProvider } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `Tooltip` | component | client | `.mn-tooltip` |
| `TooltipProvider` | component | client | `.mn-tooltip` |

Tooltip wraps a single focusable child as the Radix trigger (`asChild`).

TooltipProvider sets `delayDuration` (default 400 ms) for all tooltips below it.

Generated from the TypeScript declarations of `packages/react/src/components/overlays/tooltip`.

## Properties

### `Tooltip`

Shows on hover and keyboard focus; Escape dismisses it.

| Prop | Type | Description |
| --- | --- | --- |
| `children` required | `ReactElement<unknown, string \| import("/home/runner/work/monarch/monarch/node_modules/@types/react/index").JSXElementConstructor<any>>` | A single focusable element. |
| `content` required | `ReactNode` | Supplementary text. Never put essential information or interactive content here. |
| `align` | `"center" \| "start" \| "end"` |  |
| `defaultOpen` | `boolean` |  |
| `onOpenChange` | `((open: boolean) => void)` |  |
| `open` | `boolean` |  |
| `side` | `"top" \| "right" \| "bottom" \| "left"` |  |

### `TooltipProvider`

Mount once near the root. Shares the open delay across tooltips.

| Prop | Type | Description |
| --- | --- | --- |
| `children` required | `ReactNode` |  |
| `delayDuration` | `number` |  |

## Variants

| Prop | Values | Description |
| --- | --- | --- |
| `side` | `'top'``'right'``'bottom'``'left'` | Preferred side. Default `top`. |
| `align` | `'start'``'center'``'end'` | Alignment on that side. Default `center`. |

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Open / closed | – | Controlled with `open` / `onOpenChange` or uncontrolled with `defaultOpen`. |

## Interaction behaviour

- Opens after the provider delay on hover, and on keyboard focus.
- Escape dismisses it.

## Keyboard support

| Keys | Action |
| --- | --- |
| Tab | Focusing the trigger opens the tooltip. |
| Escape | Dismisses the tooltip. |

## Accessibility

Role

tooltip

Accessible name

Its text becomes the trigger’s accessible description.

- The trigger keeps its own accessible name; the tooltip only describes it.

## Responsive behaviour

- At most 18rem wide. Hover does not exist on touch screens, so never rely on a tooltip there.

## Theme support

- Inverse surface (`--mn-color-bg-inverse` / `--mn-color-text-inverse`), so it contrasts with the page in light and dark themes.

## Do and don't

### Do

- Wrap a single focusable element.

### Don't

- Do not use a tooltip as the only accessible name of a control; IconButton has `label` for that.

## Related components

- [Popover](https://monarchui.dev/components/popover/): Interactive floating content.
- [Button](https://monarchui.dev/components/button/): IconButton, the usual trigger.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | `@radix-ui/react-tooltip` |
| Monarch components | None |

## Testing coverage

- Appears on keyboard focus and becomes the trigger’s accessible description.
- No axe violations in jsdom.
- Renders on the server.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |

Tests: `packages/react/src/components/overlays/tooltip`

## All example code

### On an icon button

```tsx
import { IconButton, Tooltip } from '@rookcom/monarch-react';

// PlusIcon: demo icon from the docs site; use your own.

<Tooltip content="Copy link">
  <IconButton label="Copy link" icon={<PlusIcon />} />
</Tooltip>
```