`Tooltip` is a floating label that appears on hover or focus to provide additional context.

### Features

- **Simple API**: Use `content` prop for quick tooltip creation - **Compound API**: Use `TooltipTrigger` + `TooltipContent` for full control - **12 Placements**: Support all positions around the trigger element - **2 Variants**: `default` (dark) and `light` styles - **Keyboard Shortcut**: Display shortcuts with `shortcut` prop - **Delay Group**: Smooth transitions via `TooltipProvider`

### Simple API

```tsx <Tooltip content="Helpful tip"> <Button>Hover me</Button> </Tooltip> ```

### Compound API

```tsx <Tooltip> <TooltipTrigger> <Button>Hover me</Button> </TooltipTrigger> <TooltipContent>Helpful tip</TooltipContent> </Tooltip> ```

### TooltipProvider

Enables delay grouping - after first tooltip appears, subsequent tooltips show instantly.

```tsx <TooltipProvider delay={{ open: 400, close: 200 }}> <Tooltip content="Bold"><Button>B</Button></Tooltip> <Tooltip content="Italic"><Button>I</Button></Tooltip> </TooltipProvider> ```

Basic: Simple API with `content` prop vs Compound API with separate components.

Placements: 12 positions - top/right/bottom/left with start/end variants.

Variants: `default` (dark) and `light` visual styles.

Options: Arrow visibility (`withArrow`) and distance (`offset`).

Disabled: Prevent tooltip from appearing with `disabled` prop.

Controlled: Manage open state externally with `open` and `onOpenChange`.

Shortcut: Display keyboard shortcuts with `shortcut` prop. Supports modifiers: `command`, `ctrl`, `shift`, `alt`, `option`.

DelayGroup: Use `TooltipProvider` for smooth transitions between tooltips. First tooltip has delay, subsequent ones appear instantly while moving quickly.

Interactive: Control whether tooltip can be hovered and stays visible.

- **interactive={true}** (default): Tooltip stays visible when mouse moves over it. You can hover on the tooltip content itself. - **interactive={false}**: Tooltip dismisses immediately when mouse leaves the trigger. Mouse cannot hover over tooltip content (pointer-events: none). No text cursor appears when hovering over tooltip.

Try hovering over both buttons and moving your mouse to the tooltip content:

- Left button: You can hover on the tooltip, it stays visible - Right button: Tooltip disappears immediately when you move away from the button