import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { Tooltip } from './tooltip.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

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

# Tooltip

The `Tooltip` component displays a tooltip popup on hover and on focus.

## Stories

### Default

<Canvas>
  <Story id="components-overlays-tooltip--default" />
</Canvas>

### Four Placements

<Canvas>
  <Story id="components-overlays-tooltip--four-placements" />
</Canvas>

## Supported Property Mixins

Spacing:

<Canvas>
  <Story id="components-overlays-tooltip--mixins-spacing" />
</Canvas>

Stacked:

<Canvas>
  <Story id="components-overlays-tooltip--mixins-stacked" />
</Canvas>

## With styled text as the Trigger

A Span component:

<Preview withToolbar>
  <Story id="tooltip--span-trigger-element" />
</Preview>

## Props

#### placement

PopperJS exposes a variety of placement locations, but the `<Tooltip />` component is restricted to `placement: 'left' | 'right' | 'top' | 'bottom'`. This placement will change based on viewport and offsets though, so the tooltip will flip if it cannot render in the placement given.

#### reference

We use a render props function to render an arbitrary element as a reference element for the tooltip. This reference function provides two props, `ref` and `getReferenceProps` that can be given to the reference element. `ref` should always be passed down to the reference element, as it is required to allow us to position the tooltip correctly.

`getReferenceProps` should be spread into the reference element, as it provides the correct `aria-attributes` and event handlers to make sure the tooltip gets correctly displayed when the reference element is hovered or focused.

<FlowPropsTable ofComponent={Tooltip} />

## External Reference

<ExternalReferenceLink src="" type="figma" />
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/overlays/tooltip"
  type="github"
/>