import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Tooltip from '../Tooltip';
import Icon from '../../icon/Icon';

export const placeholder = (
    <ul style={{ padding: 0, margin: 0 }}>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
);

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

# Tooltip
<br />

## `Tooltips` are used to provide additional information while overing over an UI element.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Tooltip
            id="default"
            placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget iaculis nibh."
        >
            Tooltip
        </Tooltip>
    </Story>
</Canvas>

### Icon
<Canvas>
    <Story name="Icon">
        <Tooltip id="icon" placeholder="Add to favorites"><Icon type="star" width="20px" /></Tooltip>
    </Story>
</Canvas>

### Multiple tooltips in paragraph
<Canvas>
    <Story name="Multiple tooltips in paragraph">
        <p>
            {'Lorem '}
            <Tooltip id="placeholder-1" placeholder="ipsum">ipsum</Tooltip>
            {' dolor sit amet, consectetur elit. Donec, rutrum vel vitae, blandit vel est.'}
        </p>
        <p>
            {'Mauris ut '}
            <Tooltip id="placeholder-2" placeholder="tellus">tellus</Tooltip>
            {' semper, dapibus sit amet, mollis metus. Maecenas vitae diam, et vulputate ligula'}
        </p>
    </Story>
</Canvas>

### HTML tooltip
<Canvas>
    <Story name="HTML tooltip">
        <Tooltip id="html" placeholder={placeholder} position="right">Tooltip</Tooltip>
    </Story>
</Canvas>

## Usage Example
```jsx
import Tooltip from '@appdirect/sfb-theme-components/src/atoms/tooltip/Tooltip'

<Tooltip id="uniqueId" placeholder="tooltipToDisplay" position="right" />
```

## Props
<ArgsTable of={Tooltip} />
