import { Canvas, Meta, Controls, Source } from '@storybook/addon-docs';
import * as TooltipStories from './Tooltip.stories';

# Tooltip

<Meta of={TooltipStories} />

<br />

## Overview

부연 설명을 표시할 때 사용되는 요소로 개체 위에 포인터를 올려놓았을 때 자동으로 표시되는 기능입니다.

<Canvas of={TooltipStories.Default} />

<Controls />

<br />

## Usage

기본적인 <strong>Tooltip</strong> 컴포넌트 사용방법 입니다.

<Source
  code={`
    components: {
      TooltipRoot: Tooltip.Root,
      TooltipContent: Tooltip.Content,
      TooltipTrigger: Tooltip.Trigger,
      Text
    },
    setup() {
      return { args };
    },
    template: {
      <div>
        <TooltipRoot>
        <TooltipTrigger>
         <Text>마우스 커서를 올려주세요</Text>
        </TooltipTrigger>
          <TooltipContent v-bind="args">
            툴팁 컴포넌트 내용입니다.
          </TooltipContent>
        </TooltipRoot>
      </div>
    }
`}
/>

<br />

## API Reference

### Root

Tooltip Content와 Trigger를 감싸주는 컴포넌트입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>defaultOpen</td>
      <td>boolean</td>
      <td>툴팁의 초기 오픈 여부를 나타냅니다.</td>
      <td>true</td>
    </tr>
    <tr>
      <td>open</td>
      <td>boolean</td>
      <td>툴팁의 오픈 여부를 나타냅니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>툴팁의 비활성화 여부를 나타냅니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>delayDuration</td>
      <td>number</td>
      <td>포인터가 툴팁을 트리거했을 때 부터 툴팁이 오픈될 때까지의 시간을 나타냅니다.</td>
      <td>true</td>
    </tr>
  </tbody>
</table>

### Trigger

Tooltip의 Trigger 컴포넌트입니다.

### Content

Tooltip의 Content 컴포넌트입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>side</td>
      <td>boolean</td>
      <td>"top" | "left" | "right" | "bottom"</td>
      <td>"top"</td>
    </tr>
    <tr>
      <td>align</td>
      <td>'start' | 'center' | 'end'</td>
      <td>트리거에 대한 기본 정렬입니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>alignOffset</td>
      <td>number</td>
      <td>start 또는 end 의 정렬의 오프셋입니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>arrowPadding</td>
      <td>number</td>
      <td>화살표와 컨텐츠의 모서리 사이의 패딩을 나타냅니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>
## Variant

### Radius

`radius` props는 컴포넌트의 둥글기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={TooltipStories.Radius} />

### Position

`position` props는 컴포넌트의 위치를 변경합니다.

기본 값은 `top` 입니다.

<Canvas of={TooltipStories.Position} />