# Tooltip and Toggletip

> Hover and focus tooltips (dark one-liners or light rich cards) and click-to-open toggletips for help.

Category: Overlays. Docs page: https://rime.mjsons.net/components/tooltip

## Installation

```bash
npx shadcn@latest add KezLahd/rime/tooltip
```

Tooltip labels a control on hover and focus after a short delay; it can show a keyboard shortcut and only appear when text is truncated. Toggletip is an info button that opens a small panel on click, for help text people need to read.

## Usage

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

<Tooltip content="Print invoice"><IconButton label="Print" icon={<IconPrinter size={17} />} /></Tooltip>
```

## Props: Tooltip

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` (required) | `ReactNode` |  | Supplementary text only. Never the sole label of a control, never the only place essential information lives. |
| `title` | `ReactNode` |  | Makes it a rich tooltip: a bold first line above the content. |
| `footer` | `ReactNode` |  | Rich tooltip: a quiet line under a hairline (a source, a caveat). Not interactive: use Toggletip for a link. |
| `shortcut` | `ReadonlyArray<string>` |  | Keys shown as badges after the content, e.g. ["Ctrl", "K"]. Also sets aria-keyshortcuts on the trigger. |
| `children` (required) | `ReactElement<TriggerProps>` |  | One focusable element (a button, a link). Its handlers are preserved. A disabled button fires no pointer or focus events: wrap it in TooltipTarget. |
| `side` | `TooltipSide` | `"top"` | Preferred side. Flips to the opposite side when there is no room. |
| `delay` | `number` | `400` | Hover delay in ms. Focus shows at once; so does hover within 400 ms of another tooltip closing. |
| `tone` | `"dark" \| "light"` |  | dark (default for plain) or light (default for rich). |
| `maxWidth` | `number` |  | Default 240 plain, 300 rich. |
| `onlyWhenTruncated` | `boolean` | `false` | Only open when the trigger's text is clipped (an ellipsised cell). The text is already in the DOM, so no aria-describedby is added. |
| `disabled` | `boolean` | `false` | Switch the tooltip off without unwrapping the trigger. |
| `inline` | `boolean` | `false` | Show the bubble open, in place beside its trigger: no portal, no listeners. For docs and thumbnails. |

## Props: Toggletip

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` (required) | `string` |  | The (i) button's accessible name: "Why we ask for a billing address". |
| `title` | `ReactNode` |  |  |
| `children` (required) | `ReactNode` |  |  |
| `footer` | `ReactNode` |  | May hold a link: a toggletip is interactive, a tooltip is not. |
| `side` | `TooltipSide` | `"top"` |  |
| `maxWidth` | `number` | `300` |  |
| `icon` | `ReactNode` |  |  |
| `className` | `string` |  |  |
| `inline` | `boolean` | `false` | Show the panel open, in place beside the button: no portal, no listeners. For docs and thumbnails. |

## Examples

### Open

inline shows the bubble and the toggletip panel open beside their triggers, in place.

```tsx
<Tooltip inline content="Print invoice" shortcut={["Ctrl", "P"]}>…</Tooltip>
<Toggletip inline label="About seats" title="Seats">Each plan includes five seats.</Toggletip>
```

### Tooltip and toggletip

```tsx
<Tooltip content="Copy reference" shortcut={["Ctrl", "C"]}>…</Tooltip>
<Toggletip label="About seats">Each plan includes five seats.</Toggletip>
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--arrow` | `50%` |
| `--r-flat` | `2px` |
| `--tooltip-bg` | `var(--brand-deep)` |
| `--tooltip-radius` | `var(--r-sm)` |

System tokens it reads: `--border-w`, `--brand-deep`, `--density`, `--dur`, `--dur-fast`, `--ease`, `--ease-out`, `--focus-color`, `--focus-ring`, `--font-body`, `--font-mono`, `--ink-body`, `--ink-brand`, `--ink-disabled`, `--ink-heading`, `--ink-inverse`, `--ink-muted`, `--ink-secondary`, `--line`, `--line-brand`, `--line-input`, `--r-2xs`, `--r-full`, `--r-md`, `--r-sm`, `--r-xs`, `--rgb-contact`, `--rgb-white`, `--shadow-float`, `--shadow-menu`, `--shadow-specular-dark`, `--surface-solid`, `--surface-sunken`, `--text-caption`, `--text-micro`, `--wash-active`, `--wash-hover`, `--wash-strong`, `--z-tooltip`.

## Accessibility

- Tooltip content is the trigger's description (aria-describedby), shown on focus too, dismissed with Esc.
- Toggletip content is announced through a live region when opened.

## Do

- Keep tooltips to a few words.

## Don't

- Don't put interactive content in a Tooltip; use a Toggletip.