# Tooltip

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TooltipArrow,
} from "zudoku/ui/Tooltip";
import { Button } from "zudoku/ui/Button";

A tooltip component built on Radix UI primitives for displaying helpful information on hover or
focus.

## Import

```tsx
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TooltipArrow,
} from "zudoku/ui/Tooltip";
```

## Components

The Tooltip component consists of several sub-components:

- `TooltipProvider` - Provides context for tooltip behavior
- `Tooltip` - The main container (root)
- `TooltipTrigger` - Element that triggers the tooltip
- `TooltipContent` - The tooltip content container
- `TooltipArrow` - Optional arrow pointing to the trigger

## Basic Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

```tsx
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
```

## With Arrow

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover for tooltip with arrow</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
      <TooltipArrow />
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

```tsx
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover for tooltip with arrow</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
      <TooltipArrow />
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
```

## Different Sides

<TooltipProvider>
  <div className="flex gap-2">
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Top</Button>
      </TooltipTrigger>
      <TooltipContent side="top">
        <p>Top tooltip</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Right</Button>
      </TooltipTrigger>
      <TooltipContent side="right">
        <p>Right tooltip</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Bottom</Button>
      </TooltipTrigger>
      <TooltipContent side="bottom">
        <p>Bottom tooltip</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Left</Button>
      </TooltipTrigger>
      <TooltipContent side="left">
        <p>Left tooltip</p>
      </TooltipContent>
    </Tooltip>

  </div>
</TooltipProvider>

```tsx
<TooltipProvider>
  <div className="flex gap-2">
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Top</Button>
      </TooltipTrigger>
      <TooltipContent side="top">
        <p>Top tooltip</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Right</Button>
      </TooltipTrigger>
      <TooltipContent side="right">
        <p>Right tooltip</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Bottom</Button>
      </TooltipTrigger>
      <TooltipContent side="bottom">
        <p>Bottom tooltip</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Left</Button>
      </TooltipTrigger>
      <TooltipContent side="left">
        <p>Left tooltip</p>
      </TooltipContent>
    </Tooltip>
  </div>
</TooltipProvider>
```

## Global Provider

For multiple tooltips, wrap your app with `TooltipProvider`:

```tsx
function App() {
  return <TooltipProvider>{/* Your app content with tooltips */}</TooltipProvider>;
}
```

## Features

- **Keyboard Navigation**: Accessible via keyboard focus
- **Positioning**: Smart positioning to stay within viewport
- **Delay Control**: Configurable show/hide delays
- **Animation**: Smooth enter/exit animations
- **Accessibility**: Full screen reader and keyboard support