# Tooltip

A small, linked explanation that works with focus and can be dismissed.

- Family: Foundation, imported from `mizu-ui` or `mizu-ui/ui`
- Docs: https://mizu.user64bit.world/components/tooltip
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/ui/Tooltip.tsx

## Usage

```tsx
import { Tooltip, Button } from "mizu-ui";

export function Example() {
  return (
    <Tooltip label="Keep your changes">
      <Button size="sm" variant="ghost">
        Save draft
      </Button>
    </Tooltip>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/tooltip 0xuser64bit/mizu/button
```

## Props

- `label`: `string`. Description linked to the control.
- `children`: `ReactElement`. One element accepting aria-describedby.
- `side`: `"top" | "bottom"` (default `"top"`). Position.

## Accessibility

Shown on hover/focus and dismissed with Escape. Use a focusable control as the child. Avoid long or essential content.

## Motion

Short CSS transition; reduced motion removes travel.