# Tooltip

> The everyday tooltip on Base UI: an inverted high-contrast label or a bordered card, a tip on any of four sides that flips and shifts at the screen edge, keyboard shortcut chips, an optional muted description for two-line hints, and a provider that groups delays so moving along a toolbar opens each tooltip instantly.

- Slug: `tooltip`
- Category: [Popovers](https://www.assembli.design/category/popovers.md)
- Type: component
- Tags: tooltip, hint, shortcut, kbd, toolbar, base-ui
- npm dependencies: @base-ui/react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/tooltip
- Page: https://www.assembli.design/components/tooltip

![Tooltip preview](https://www.assembli.design/thumbnails/tooltip-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` (required) | `React.ReactElement<Record<string, unknown>>` |  | The trigger. Its props and ref are merged with the tooltip's, so pass a real focusable element. |
| `content` (required) | `React.ReactNode` |  | The label, or the title line when `description` is set. |
| `description` | `React.ReactNode` |  | A muted second paragraph, which turns the tooltip into a two-line rich hint. |
| `shortcut` | `string \| string[]` |  | Keyboard chips after the label: `"Esc"` or `["⌘", "B"]`. |
| `variant` | `TooltipVariant` | `"inverted"` |  |
| `side` | `TooltipSide` | `"top"` |  |
| `align` | `"start" \| "center" \| "end"` | `"center"` |  |
| `sideOffset` | `number` |  |  |
| `alignOffset` | `number` | `0` |  |
| `arrow` | `boolean` | `true` | Draws a tip pointing at the trigger. |
| `open` | `boolean` |  |  |
| `defaultOpen` | `boolean` |  |  |
| `onOpenChange` | `(open: boolean) => void` |  |  |
| `disabled` | `boolean` |  | Stops the tooltip opening without touching the trigger. |
| `delay` | `number` |  | Overrides the provider's open delay for this trigger, in ms. |
| `closeDelay` | `number` |  |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/tooltip/tooltip.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/tooltip
```

Registry item JSON: https://www.assembli.design/r/tooltip.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.