import Tooltip from '../Tooltip';
import Icon from '../../Icon';

import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: Tooltip,
  title: 'Components/Tooltip',
};

<Meta
  title="Components/Tooltip"
  component={Tooltip}
/>

export const TooltipTemplate = args => (
  <div className="h-16 w-full">
    <div class="mx-auto h-8 w-8">
      <Tooltip {...args}>
        <Icon name="clipboard" />
      </Tooltip>
    </div>
  </div>
);

<Heading
  title="Tooltip"
  componentRelativePath="Tooltip/Tooltip.js"
/>

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Contribute](#contribute)

## Overview

Tooltip is a component that renders the Tooltips.

<Canvas>
  <Story
    name="Overview"
    args={{
      content: 'Tooltip',
    }}
  >
    {TooltipTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Tooltip} />

## Usage

### Position

You can set the position of the tooltip by using the `position` prop.

<Canvas>
  <Story name="Position">
    <div className="m-8 h-16 w-full">
      <div class="mx-auto h-8 w-8">
        <Tooltip
          position="right"
          content="right"
        >
          <Icon name="clipboard" />
          <span>Right</span>
        </Tooltip>
      </div>
    </div>
    <div className="m-8 h-16 w-full">
      <div class="mx-auto h-8 w-8">
        <Tooltip
          position="left"
          content="left"
        >
          <Icon name="clipboard" />
          <span>Left</span>
        </Tooltip>
      </div>
    </div>
  </Story>
</Canvas>

## Contribute

<Footer componentRelativePath="Tooltip/__stories__/tooltip.stories.mdx" />
