# Tooltip

## Overview

Radix Tooltip wrappers with DS tokens and variants. Includes `TooltipProvider` for global delay, `Tooltip` root, `TooltipTrigger`, and `TooltipContent` with `primary` and `card` looks.

---

## Components & Props

- **TooltipProvider**
  - `delayDuration?: number` (default `0`)
  - Provides default open delay for nested tooltips.
- **Tooltip** (Root)
  - Inherits Radix `TooltipPrimitive.Root` props: `open?`, `defaultOpen?`, `onOpenChange?`, `disableHoverableContent?`.
  - Note: `delayDuration` is set via `TooltipProvider`, not here.
- **TooltipTrigger**
  - Inherits Radix `Trigger` props. Use `asChild` to wrap buttons/links.
- **TooltipContent**
  - Inherits Radix `Content` props: `side?`, `align?`, `sideOffset?` (default `0`), `alignOffset?`.
  - `variant?: "primary" | "card"` (default `"primary"`).

---

## Examples

### Default

```tsx
import { Button, Tooltip, TooltipTrigger, TooltipContent } from "laif-ds";

export function Basic() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Passa sopra</Button>
      </TooltipTrigger>
      <TooltipContent>Questo è un tooltip</TooltipContent>
    </Tooltip>
  );
}
```

### Positioning

```tsx
<div className="flex items-center gap-4">
  <Tooltip>
    <TooltipTrigger asChild>
      <Button size="sm">Top</Button>
    </TooltipTrigger>
    <TooltipContent side="top" sideOffset={5}>
      Tooltip in alto
    </TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button size="sm">Right</Button>
    </TooltipTrigger>
    <TooltipContent side="right" sideOffset={5}>
      Tooltip a destra
    </TooltipContent>
  </Tooltip>
</div>
```

### With Delay

```tsx
import { TooltipProvider } from "laif-ds";

export function WithDelay() {
  return (
    <TooltipProvider delayDuration={500}>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button>Ritardo 500ms</Button>
        </TooltipTrigger>
        <TooltipContent>Appare dopo 500ms</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}
```

### Card Variant

```tsx
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost">Info</Button>
  </TooltipTrigger>
  <TooltipContent variant="card">Contenuto con bordo e shadow</TooltipContent>
</Tooltip>
```

---

## Notes

- **Variants**: `primary` for compact color tooltip; `card` for bordered content blocks.
- **Groups**: Wrap toolbars with multiple triggers; provider can be defined once at app root.