# Tooltip

- Page: <https://kznlabs.github.io/labsUI/components/tooltip>

## Tooltip (`tooltip`, component)

Short label on hover or keyboard focus, also wired as the trigger's aria-describedby. Warm-up: once one opens, neighbors open instantly. Hoverable, Esc dismisses, ignores touch.

- Install: `npx @kznlabs/labsui add tooltip`
- Docs: <https://kznlabs.github.io/labsUI/components/tooltip>
- Brings: platform, use-anchor, use-dismiss, use-hover-open, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Tooltip>`: Hover/keyboard-focus label for one element. Stays open while the pointer is on it (WCAG
1.4.13), Esc dismisses. On touch: touch and hold shows it, or a tap with `touch="tap"`.
  - `children: ReactNode`: One focusable element, e.g. an icon Button with an aria-label.
  - `content: ReactNode`: Short text. Also becomes the trigger's accessible description.
  - `align?: "start" | "center" | "end"` = `"center"`: Alignment with the trigger.
  - `delay?: number` = `500`: Hover delay in ms before the first tooltip opens (default 500).
  - `side?: "top" | "bottom"` = `"top"`: Preferred side; flips when there is no room.
  - `touch?: "press" | "tap"` = `"press"`: How touch opens it: `press` (touch and hold; a tap still reaches the control) or `tap` (a tap
toggles it, for triggers with no action of their own).

### Usage

```tsx
<Tooltip content="Bold ⌘B"><Button variant="ghost" size="icon" aria-label="Bold"><Bold /></Button></Tooltip>
```

### Example: format-toolbar.tsx

```tsx
import { Bold, Italic } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";

export function FormatToolbar() {
  return (
    <div className="flex gap-1">
      <Tooltip content="Bold ⌘B">
        <Button variant="ghost" size="icon" aria-label="Bold"><Bold /></Button>
      </Tooltip>
      <Tooltip content="Italic ⌘I">
        <Button variant="ghost" size="icon" aria-label="Italic"><Italic /></Button>
      </Tooltip>
    </div>
  );
}
```