import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Tooltip from '../Tooltip';
import Icon from '../../icon/Icon';
import * as TooltipStories from './Tooltip.stories';

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

<Meta of={TooltipStories} />

# Tooltip

<br />

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

<br />

### Default

<Canvas>
  <Story of={TooltipStories.Default} />
</Canvas>

### Icon

<Canvas>
  <Story of={TooltipStories.Icon} />
</Canvas>

### Multiple tooltips in paragraph

<Canvas>
  <Story of={TooltipStories.MultipleTooltipsInParagraph} />
</Canvas>

### HTML tooltip

<Canvas>
  <Story of={TooltipStories.HtmlTooltip} />
</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} />
