# Tooltip

> A name and shortcut for an icon. The first one waits; after that they glide from trigger to trigger like one label travelling along the toolbar.

Tooltips usually fade in one by one, each with its own delay, so running along a toolbar flickers. Here the first one rises off its trigger after a short rest; while it is warm, the next one shows at once and glides over from where the last one was. A press, Escape or leaving hides it, keyboard focus shows it, and touch never does.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/tooltip.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/tooltip
- Registry item (source): https://hairlineui.com/r/tooltip.json

## Usage

```tsx
import { Tooltip } from "@/components/ui/tooltip";

<Tooltip content="Archive" shortcut="E">
  <button aria-label="Archive"><ArchiveIcon /></button>
</Tooltip>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactElement` | – | The trigger; it gets aria-describedby while showing. |
| `content` | `ReactNode` | – | The text. |
| `shortcut` | `string` | – | A key or chord after the text. |
| `side / align` | `Side / Align` | `"top" / "center"` | Where it sits. |
| `delay` | `number` | `500` | Rest before the first one shows. |
| `disabled` | `boolean` | `false` | Never show. |

## States

- **first**: After 500ms on the trigger it rises 6px from the side it sits on, out of a 4px blur, from 0.96 (320ms).
- **warm**: The next trigger's tooltip shows at once and glides from the previous position (300ms).
- **hidden**: Leaving, a press or Escape fades it (140ms).

## What it handles

A row of tooltips that each wait and fade on their own feels like flicker. Shared warm state makes them one surface that moves.

- **Warm glide**: Within 450ms of the last one, the next shows at once and slides over from its position.
- **Placement**: Flips to the other side and shifts to stay 8px inside the window.
- **Shortcuts**: A kbd after the label, dimmed.
- **Accessible**: role="tooltip" and aria-describedby on the trigger; focus-visible shows it.

## Replaces

Radix Tooltip, TooltipProvider delay groups, floating-ui

## Where it fits

- **Icon toolbars**: Names and shortcuts for Bold, Italic, Link.
- **Dense tables**: Explaining a truncated value or an icon column.
- **Navigation rails**: Labels for a collapsed sidebar.
- **Disabled actions**: Saying why something can't be done yet.

## Notes

- Placement, presence and dismissal live in floating.ts, shared by tooltip, popover, dropdown and context menus: they all flip, shift, enter and leave the same way.
- Touch never shows a tooltip: put anything important in the label itself.
- Reduced motion: it fades, no glide.

License: MIT (https://hairlineui.com/license#components)