# Tooltip set (goodtabs UI)

Three tooltip patterns: icon label with shortcut, disabled reason and a two-line hint.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/tooltip-set.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/tooltip-set`

## Usage

```tsx
import { Tip, DisabledTip, Hint } from "@/components/ui/tooltip-set"

<Tip label="Copy link" shortcut={["⌘", "C"]}>
  <Button size="icon" aria-label="Copy link">...</Button>
</Tip>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | Tip: the label, a few words. |
| shortcut | `string[]` |  | Tip: keycaps shown after the label. |
| side | `"top" | "right" | "bottom" | "left"` | `"top"` | Preferred side on all three. |
| delay | `number` | `300` | Tip: milliseconds before hover opens it. |
| reason | `string` |  | DisabledTip: why the control is disabled. |
| title | `string` |  | Hint: the bold first line. |
| body | `string` |  | Hint: one or two sentences. |

## When to use

- Naming an icon-only control
- Explaining why a button is disabled
- A short definition for a term in text

## When not to use

- Anything interactive or longer than two lines, use a hover card or popover
- Information that touch users need, tooltips do not open on tap
- Replacing a visible label

## Notes for agents

- Client component; each export wraps its own TooltipProvider so it works without app-level setup
- The tip never replaces an accessible name: give icon buttons an aria-label too
- Keycaps are aria-hidden; put the shortcut on the control with aria-keyshortcuts if it matters
- DisabledTip makes its wrapper tabIndex 0 and sets pointer-events none on the child so hover reaches the wrapper
- Children of Tip and Hint must forward a ref and spread props, as Button and native elements do
- Tooltip content is inverted (bg-foreground), which is the shipped primitive's style

Docs: https://ui.goodtabs.co/components/tooltip-set