npm package: @lightspeed/cirrus-tooltip
Description: Cirrus Tooltip Component
Author: Lightspeed
Latest version: 6.0.0-beta.1

# Tooltip

Tooltips are visual helpers when users hover or focus an element. They can also be activated without interaction to give extra information.

**Note that tooltips won't be triggered on touch devices.**

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-tooltip
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-tooltip
```

## Usage

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-tooltip/Tooltip.scss';
```

### Content
The content inside of tooltips should NEVER be crucial information. As their discoverability isn’t that great and you don’t have hovers on touchscreen devices.

### Directions
The tooltip comes in two styles with multiple directions. The direction indicates the position of the content _(e.g. "top" means the content appears above the element)_

----------

## React Component

#### Props

| Prop        | Type                                                                                            | Description                                                             |
| ----------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| `children`  | React.ReactNode                                                                                 | The content that will trigger the tooltip                               |
| `content`   | string                                                                                          | The content to display within the tooltip                               |
| `placement` | oneOf([`top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `right`]) | Tooltip placement, defaults to `top`                                    |
| `light`     | boolean                                                                                         | Displays tooltip on a light background                                  |
| `active`    | boolean                                                                                         | Forces tooltip to always display                                        |
| `tag`       | string                                                                                          | the tag that will be used by `react-popper` manager, default is a `div` |

#### Example

```js
import React from 'react';
import Tooltip from '@lightspeed/cirrus-tooltip';

const MyComponent = () => (
  <div>
    <Tooltip content="Tooltip">Trigger</Tooltip>
  </div>
);

export default MyComponent;
```

## CSS Component

You can use CSS classes along with [`popper.js`](https://popper.js.org/) (the library used by the React component) to enable tooltips outside a React application. Here's the available classes:

| Type      | Class                    |
| --------- | ------------------------ |
| box       | `.cr-tooltip`            |
| placement | `[data-placement="top"]` |
| light     | `.cr-tooltip--light`     |
| arrow     | `.cr-tooltip__arrow`     |