> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltip

> Tooltip component with automatic positioning and arrow support

export const TooltipPlacementsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/TooltipPlacements" frameBorder="0" width="100%" height="400"></iframe>;

export const TooltipWithDescriptionPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/TooltipWithDescription" frameBorder="0" width="100%" height="260"></iframe>;

export const TooltipBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/TooltipBasic" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

The Tooltip component displays contextual information on hover or focus with automatic positioning, arrow support, and customizable placement.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Tooltip } from '@peppermint-design/devreadykit-custom';
    import { Button } from '@peppermint-design/devreadykit-custom';

    export default function TooltipBasic() {
      return (
        <Tooltip title="This is a tooltip">
          <Button>Hover me</Button>
        </Tooltip>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <TooltipBasicPreview />
  </Tab>
</Tabs>

## With Description

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Tooltip } from '@peppermint-design/devreadykit-custom';
    import { Button } from '@peppermint-design/devreadykit-custom';

    <Tooltip 
      title="Tooltip title"
      description="Additional description text"
    >
      <Button>Hover for details</Button>
    </Tooltip>
    ```
  </Tab>

  <Tab title="Preview">
    <TooltipWithDescriptionPreview />
  </Tab>
</Tabs>

## Placement

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Tooltip } from '@peppermint-design/devreadykit-custom';
    import { Button } from '@peppermint-design/devreadykit-custom';

    <Tooltip title="Top" placement="top">
      <Button>Top</Button>
    </Tooltip>

    <Tooltip title="Bottom" placement="bottom">
      <Button>Bottom</Button>
    </Tooltip>

    <Tooltip title="Left" placement="left">
      <Button>Left</Button>
    </Tooltip>

    <Tooltip title="Right" placement="right">
      <Button>Right</Button>
    </Tooltip>
    ```
  </Tab>

  <Tab title="Preview">
    <TooltipPlacementsPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop        | Type                                               | Default     | Description            |
  | :---------- | :------------------------------------------------- | :---------- | :--------------------- |
  | children    | `React.ReactNode`                                  | -           | Trigger element        |
  | title       | `string`                                           | `"Tooltip"` | Tooltip title          |
  | description | `React.ReactNode`                                  | -           | Tooltip description    |
  | placement   | `"top" \| "bottom" \| "left" \| "right" \| "auto"` | `"auto"`    | Tooltip placement      |
  | offset      | `number`                                           | `12`        | Offset from trigger    |
  | delay       | `number`                                           | `0`         | Show delay in ms       |
  | open        | `boolean`                                          | -           | Controlled open state  |
  | defaultOpen | `boolean`                                          | `false`     | Default open state     |
  | arrowAlign  | `"start" \| "center" \| "end"`                     | `"center"`  | Arrow alignment        |
  | className   | `string`                                           | -           | Additional CSS classes |
</PropsTable>