# Tooltip

The `Tooltip` component is built on top of [PopperJS](https://popper.js.org/), a positioning library. This allows us to easily build out the component without having to worry about auto positioning the tooltip. The tooltip component controls tooltip state internally by exposing a render-prop based reference element. If you would like to override the default Tooltip settings, you should use the `Popper` component with the `TooltipView` provided.

The `Tooltip` component will display a tooltip popup on hover and on focus

### Example

```js
<Tooltip
  placement="top"
  reference={({ ref, getReferenceProps }) => (
    <div {...getReferenceProps} ref={ref}>
      Reference element
    </div>
  )}
>
  This is a fancy tooltip
</Tooltip>
```

### 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 `PopperJS` 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.

#### children

children are typed as `children: TranslatedContent | Node`
