# @lightspeed/cirrus-tooltip

> Cirrus Tooltip Component

Latest version **6.0.0-beta.1** (published 2018-12-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lightspeed/cirrus-tooltip
pnpm add @lightspeed/cirrus-tooltip
yarn add @lightspeed/cirrus-tooltip
bun add @lightspeed/cirrus-tooltip
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.0-beta.1 |
| Published | 2018-12-03 |
| First published | 2017-08-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 57.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lightspeed |
| Maintainers | ahmedelgabri, inooid, kurt.bergeron, lightspeedhq, ls-frederic-bouchard, ls-guillaume-lambert, tombertrand |

## Links

- npm: https://www.npmjs.com/package/@lightspeed/cirrus-tooltip
- npm.io page: https://npm.io/package/@lightspeed/cirrus-tooltip

## Dependencies (1)

- [react-popper](https://npm.io/package/react-popper.md) ^1.0.2

## Recent versions

- 6.0.0-beta.1 (latest) — 2018-12-03
- 6.0.0-beta.0 — 2018-12-03
- 6.0.0-alpha.0 — 2018-11-29
- 5.0.0 — 2018-11-08
- 4.0.1 — 2018-08-10
- 4.0.0 — 2018-07-26
- 3.0.0 — 2018-04-30
- 2.0.1 — 2018-03-16
- 2.0.0 — 2018-02-14
- 1.0.5 — 2018-01-29
- 1.0.4 — 2018-01-15
- 1.0.3 — 2018-01-08
- 1.0.2 — 2018-01-08
- 1.0.1 — 2017-11-24
- 1.0.0 — 2017-11-09
- … 7 more at https://npm.io/package/@lightspeed/cirrus-tooltip/versions

## README

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

---
_Source: https://npm.io/package/@lightspeed/cirrus-tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._