# bpk-component-tooltip

> Backpack tooltip component.

## Installation

```sh
npm install bpk-component-tooltip --save-dev
```

## Usage

```js
import React, { Component } from 'react';
import BpkText from 'bpk-component-text';
import BpkTooltip from 'bpk-component-tooltip';

const App = () => (
  <BpkTooltip
    ariaLabel="London Heathrow"
    id="my-tooltip"
    target={<BpkText textStyle="lg">LHR</BpkText>}
  >
    London Heathrow
  </BpkTooltip>
);
```

## Props

| Property              | PropType                                       | Required | Default Value       |
| --------------------- | ---------------------------------------------- | -------- | ------------------- |
| ariaLabel             | string                                         | true     | -                   |
| id                    | string                                         | true     | -                   |
| children              | node                                           | true     | -                   |
| target                | node                                           | true     | -                   |
| hideOnTouchDevices    | bool                                           | false    | true                |
| placement             | oneOf(['top', 'right', 'bottom', 'left'])      | false    | 'bottom'            |
| padded                | bool                                           | false    | true                |
| portalStyle           | object                                         | false    | null                |
| portalClassName       | string                                         | false    | null                |
| popperModifiers       | object                                         | false    | null                |
| renderTarget          | func                                           | false    | null                |
| type                  | oneOf(`TOOLTIP_TYPES.light`, `TOOLTIP_TYPES.dark`) | false    | `TOOLTIP_TYPES.light` |

### Prop Details

#### `ariaLabel`

Tooltips are invisible to assistive technologies such as screen readers. To improve accessibility, `ariaLabel` is required to describe the content of the tooltip to assistive technologies.

The label will be used on the `target` element, so any existing `aria-label` attached to `target` will be overridden.

#### `popperModifiers`

Please refer to the [documentation](https://github.com/FezVrasta/popper.js/blob/v1.12.9/docs/_includes/popper-documentation.md#modifiers) for the underlying positioning library "Popper.js". You can achieve various behaviours such as allowing the tooltip to overflow the viewport etc.