pswui/packages/react/src/docs/components/Tooltip.mdx

import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
import { TooltipDemo } from "./TooltipBlocks/Preview";
import Examples from "./TooltipBlocks/Examples";

# Tooltip
A brief helper for providing contextual information or guiding user interactions.

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <TooltipDemo />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Preview.tsx`} />
    </TabContent>
</TabProvider>

## Installation

1. Create a new file `Tooltip.tsx` in your component folder.
2. Copy and paste the following code into the file.

<LoadedCode from={`${GITHUB}/packages/react/components/Tooltip.tsx`} />

## Usage

```tsx
import { Tooltip, TooltipContent } from "@components/Tooltip";
```

```html
<Tooltip>
    <TooltipContent>
        {/* Tooltip Content */}
    </TooltipContent>
    {/* Tooltip Trigger */}
</Tooltip>
```

## Props

### Tooltip

#### Variants

| Prop       | Type                                     | Default | Description                  |
|:-----------|:-----------------------------------------|:--------|:-----------------------------|
| `position` | `"bottom" \| "left" \| "right" \| "top"` | `"top"` | The position of the tooltip. |

### TooltipContent

#### Variants

| Prop     | Type                                      | Default    | Description                                        |
|:---------|:------------------------------------------|:-----------|:---------------------------------------------------|
| `offset` | `"sm" \| "md" \| "lg"`                    | `"md"`     | Gap between the tooltip and the trigger.           |
| `delay`  | `"none" \| "early" \| "normal" \| "late"` | `"normal"` | The time between hover start and appear of tooltip |

## Examples


### Top

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Top />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Top.tsx`} />
    </TabContent>
</TabProvider>

### Bottom

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Bottom />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx`} />
    </TabContent>
</TabProvider>

### Left

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Left />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Left.tsx`} />
    </TabContent>
</TabProvider>

### Right

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Right />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Right.tsx`} />
    </TabContent>
</TabProvider>

### No Delay

<TabProvider defaultName="preview">
  <TabList>
    <TabTrigger name={"preview"}>Preview</TabTrigger>
    <TabTrigger name={"code"}>Code</TabTrigger>
  </TabList>
  <TabContent name="preview">
    <Story layout="centered">
      <Examples.NoDelay />
    </Story>
  </TabContent>
  <TabContent name="code">
    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx`} />
  </TabContent>
</TabProvider>

### Early Delay

<TabProvider defaultName="preview">
  <TabList>
    <TabTrigger name={"preview"}>Preview</TabTrigger>
    <TabTrigger name={"code"}>Code</TabTrigger>
  </TabList>
  <TabContent name="preview">
    <Story layout="centered">
      <Examples.EarlyDelay />
    </Story>
  </TabContent>
  <TabContent name="code">
    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx`} />
  </TabContent>
</TabProvider>

### Late Delay

<TabProvider defaultName="preview">
  <TabList>
    <TabTrigger name={"preview"}>Preview</TabTrigger>
    <TabTrigger name={"code"}>Code</TabTrigger>
  </TabList>
  <TabContent name="preview">
    <Story layout="centered">
      <Examples.LateDelay />
    </Story>
  </TabContent>
  <TabContent name="code">
    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx`} />
  </TabContent>
</TabProvider>

### Controlled

<TabProvider defaultName="preview">
  <TabList>
    <TabTrigger name={"preview"}>Preview</TabTrigger>
    <TabTrigger name={"code"}>Code</TabTrigger>
  </TabList>
  <TabContent name={"preview"}>
    <Story layout={"centered"}>
      <Examples.Controlled />
    </Story>
  </TabContent>
  <TabContent name={"code"}>
    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx`} />
  </TabContent>
</TabProvider>