# Tooltip

Tooltip is a neobrutalist React component from Cruise UI. A short hint on hover and focus. Hard-edged, no fade.

Install (with the @cruiseui registry in components.json, see Installation):

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

Import: `import { CruiseTooltip } from "@/components/cruise/tooltip";`

## When to use

A short hint about a control: what an icon button does, how a fee is worked out.

## When not to

Anything people must know. Phones and keyboards may never show it; put it on the page.

## Example (React)

```tsx
import { Info } from "lucide-react";
import { CruiseButton } from "@/components/cruise/button";
import { CruiseTooltip } from "@/components/cruise/tooltip";

export default function TooltipExample() {
  return (
    <div className="pt-12">
      <CruiseTooltip content="Worked out from your address at checkout.">
        <CruiseButton variant="secondary">
          <Info aria-hidden="true" />
          Delivery fee
        </CruiseButton>
      </CruiseTooltip>
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<span class="tooltip-wrap">
  <button type="button" class="brutal btn btn-secondary" aria-describedby="fee-tip" data-tooltip>Delivery fee</button>
  <span role="tooltip" id="fee-tip" class="tooltip" hidden>Worked out from your address at checkout.</span>
</span>
```

## Props: CruiseTooltip

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | `string` | — | — |
| `children` | `ReactElement<{ "aria-describedby"?: string \| undefined; }, string \| JSXElementConstructor<any>>` | — | — |

## Accessibility

- Opens on hover AND keyboard focus (after ~300ms), closes with Esc, toggles on tap.
- role="tooltip"; the trigger points to it with aria-describedby.