import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import Tooltip from './Tooltip';
import Typography from '../Typography';

<Meta title="Data Display|Tooltip" component={Tooltip} />

# Tooltip

<Preview>
  <Story name="Index">
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Tooltip placement="bottom-right" content="Bottom Right Tooltip Sample">
          Bottom Right Tooltip
        </Tooltip>
        <Tooltip placement="bottom" content="Bottom Centered Tooltip Sample">
          Bottom Centered Tooltip
        </Tooltip>
        <Tooltip placement="bottom-left" content="Bottom Left Tooltip Sample">
          Bottom Left Tooltip
        </Tooltip>
      </div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Tooltip placement="right" content="Right Tooltip Sample">
          Right Tooltip
        </Tooltip>
        <Tooltip placement="left" content="Left Tooltip Sample">
          Left Tooltip
        </Tooltip>
      </div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Tooltip placement="top-right" content="Top Right Tooltip Sample">
          Top Right Tooltip
        </Tooltip>
        <Tooltip placement="top" content="Top Centered Tooltip Sample">
          Top Centered Tooltip
        </Tooltip>
        <Tooltip placement="top-left" content="Top Left Tooltip Sample">
          Top Left Tooltip
        </Tooltip>
      </div>
    </div>
  </Story>
</Preview>

#### Props

<Props of={Tooltip} />