# @s-ui/react-atom-tooltip

> AtomTooltip is a component that wraps an element and shows a tooltip over it. It has some properties like:

Latest version **2.7.0** (published 2023-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @s-ui/react-atom-tooltip
pnpm add @s-ui/react-atom-tooltip
yarn add @s-ui/react-atom-tooltip
bun add @s-ui/react-atom-tooltip
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.7.0 |
| Published | 2023-08-16 |
| First published | 2018-07-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 13.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | luz_adv, ignacio.rodriguez, carlosvillu-adevinta, diegomr, arturo.vicente, adria.velardos, emiliovz, dann41, ruben-martin, pol.valls, cristina.rodriguez.duque, sergio.escano, marc.benito, azahara, patricio.sartore, giovanny.sayas.ext, david.cuadrado.ext, alex.castells, beatrizip, pablo.rey-adevinta, sergiocollado, mango.sanchezredondo, cristhianb, alisa_bayanova, davidmartin2108, ferrangbtw, estefania_garcia, belen.santos, alfredo.arronte, joanleon-adv, giodelabarrera.adevinta, luis-garrido, aitor.rodriguez, jordi.munoz, oscar_ramirez, ignacio_navarro, a.ferrer, gfabregoadv, norbert.guasch, izeller, salvador.juan, oriol.egea, ivanmlaborda, alejandro.ferrante, pa.chruscinski.ext, isabelgomez87, jenifer.lopez, daniela.aguilera, pablogs, javier.miguel, oscar.gomez, marian.lucaci, alverd004, oriol.puig, nacho_torrella, xavi.murcia, chloe.leteinturier, javiauso, alfredo.zimperz, francisco.ruiz.lloret, fermin.adevinta, andresadv, schibstedspain |

## Links

- npm: https://www.npmjs.com/package/@s-ui/react-atom-tooltip
- npm.io page: https://npm.io/package/@s-ui/react-atom-tooltip

## Dependencies (6)

- [@s-ui/hoc](https://npm.io/package/@s-ui/hoc.md) 1
- [react-use](https://npm.io/package/react-use.md) 17.3
- [reactstrap](https://npm.io/package/reactstrap.md) 8.9.0
- [ua-parser-js](https://npm.io/package/ua-parser-js.md) 0.7.33
- [@s-ui/react-hooks](https://npm.io/package/@s-ui/react-hooks.md) 1
- [@loadable/component](https://npm.io/package/@loadable/component.md) 5.15.x

## Recent versions

- 2.7.0 (latest) — 2023-08-16
- 2.6.0 — 2022-10-18
- 2.5.0 — 2022-10-06
- 2.4.0 — 2022-06-20
- 2.3.0 — 2022-04-05
- 2.2.0 — 2022-02-03
- 2.1.0 — 2022-01-12
- 2.0.0 — 2021-08-02
- 1.29.0 — 2021-06-22
- 1.28.0 — 2021-01-26
- 1.26.0 — 2021-01-22
- 1.25.0 — 2021-01-05
- 1.24.0 — 2020-11-26
- 1.23.0 — 2020-11-24
- 1.22.0 — 2020-10-05
- … 21 more at https://npm.io/package/@s-ui/react-atom-tooltip/versions

## README

# AtomTooltip

AtomTooltip is a component that wraps an element and shows a tooltip over it. It has some properties like:

- it will show the `title` attribute of the wrapped element by default
- can also display html as content of the tooltip
- being displayed on the screen changing sides if necessary
- being displayed on target focus (through keyboard)
- delays can be set
- the arrow position can be set
- options to select text on tooltip
- tooltip will be hidden if targeted element is not in the viewport
- tooltip can be applied over buttons (or any element w/ `onClick`)

General behaviour will be:

- **Desktop (Non-touch devices)** → tooltip will be displayed only on `mouseover`
- **Mobile (Touch devices)** → tooltip will be displayed on `touch` over target element and hidden w/ another `touch` outside of it

## Installation

```sh
$ npm install @s-ui/react-atom-tooltip --save
```

## Usage

After importing the component `AtomTooltip` like this

```javascript
import AtomTooltip from '@s-ui/react-atom-tooltip'
```

### Basic usage

```javascript
<AtomTooltip content="Last month of the year">
  <strong>december</strong>
</AtomTooltip>
```

### HTML in the Tooltip

```javascript
<AtomTooltip
  content={
    <div>
      Hello <strong>world</strong>!
    </div>
  }
>
  <strong>december</strong>
</AtomTooltip>
```

### Without arrow

```javascript
<AtomTooltip isArrowed={false} content="Last month of the year">
  <strong>december</strong>
</AtomTooltip>
```

### With delay on show and/or hide

```javascript
<AtomTooltip delay={{show: 300, hide: 1500}} content="Last month of the year">
  <strong>december</strong>
</AtomTooltip>
```

### Selecting arrow position

```javascript
<AtomTooltip
  placement={atomTooltipPlacements.TOP_START}
  content="Last month of the year"
>
  <strong>december</strong>
</AtomTooltip>
```

### Tooltip on a "call to action" element

```javascript
<AtomTooltip content="This menu display some cool options">
  <button onClick={() => alert('👍  displaying menú')}>Menu options</button>
</AtomTooltip>
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/tooltip/demo).**

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