# @cypress/react-tooltip

> A tooltip component for React apps

Latest version **0.5.4** (published 2022-11-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cypress/react-tooltip
pnpm add @cypress/react-tooltip
yarn add @cypress/react-tooltip
bun add @cypress/react-tooltip
```

## Health

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

Positive: no vulnerabilities; high maintenance score.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.5.4 |
| Published | 2022-11-22 |
| First published | 2016-09-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 35.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Maintainers | cypress-npm-publisher |

## Links

- npm: https://www.npmjs.com/package/@cypress/react-tooltip
- Repository: https://github.com/cypress-io/react-tooltip
- Homepage: https://github.com/cypress-io/react-tooltip#readme
- Issues: https://github.com/cypress-io/react-tooltip/issues
- npm.io page: https://npm.io/package/@cypress/react-tooltip

## Dependencies (1)

- [popper.js](https://npm.io/package/popper.js.md) ^1.15.0

## Recent versions

- 0.5.4 (latest) — 2022-11-22
- 0.5.3 — 2019-09-02
- 0.5.2 — 2019-07-29
- 0.5.1 — 2019-07-29
- 0.5.0 — 2019-06-20
- 0.0.0-development — 2019-06-20
- 0.4.0 — 2018-10-12
- 0.3.2 — 2017-12-18
- 0.3.1 — 2017-12-06
- 0.3.0 — 2017-12-01
- 0.2.5 — 2017-06-30
- 0.2.4 — 2017-06-09
- 0.2.3 — 2017-06-08
- 0.2.2 — 2017-03-10
- 0.2.1 — 2017-03-10
- … 6 more at https://npm.io/package/@cypress/react-tooltip/versions

## README

# React Tooltip [![renovate-app badge][renovate-badge]][renovate-app] [![CircleCI](https://circleci.com/gh/cypress-io/react-tooltip.svg?style=svg)](https://circleci.com/gh/cypress-io/react-tooltip)

A tooltip component for React apps utilizing the excellent [popper.js library](https://popper.js.org).

## Installation

```sh
npm install --save @cypress/react-tooltip
```

## Usage

```javascript
import Tooltip from '@cypress/react-tooltip'

<Tooltip title="Hello World">
  <button>Click me</button>
</Tooltip>
```

The tooltip will automatically appear when mousing over the button and disappear when mousing out from the button.

## Options

option | default | description | supported values
---|----|----|----
title | undefined | _Required_. The tooltip content | Anything renderable by React (string, number, element, etc)
placement | 'top' | The placement of the tooltip | Placements supported by [popper.js](https://popper.js.org/documentation.html#new_Popper)
visible | undefined | Whether to show the tooltip when rendered. This overrides the default showing/hiding on mouse-over/mouse-out | `true` or `false`
className | 'tooltip' | Class applied to the tooltip
wrapperClassName | '' | Class applied to the `<span>` that wraps the children of `<Tooltip>`
updateCue | undefined | A prop that indicates that the tooltip's position should update. If the size of the tooltip target changes while the tooltip is showing, the tooltip won't know to update its position. Set this to something that's tied to the target's size or just to a new value to trigger an update of the tooltip's position.

## Development

```sh
# watches JS and SCSS for changes and compiles
# runs tests for associated
npm run watch

# run all tests
npm test

# creates a demo page at http:localhost:8888/design.html for design purposes
npm run design
```

## Changelog

For latest changelog see [cypress-io/react-tooltip/releases](https://github.com/cypress-io/react-tooltip/releases). Older changes are below:

#### 0.2.2 - *(03/10/17)*
- Add customizable tooltip border

#### 0.2.1 - *(03/10/17)*
- Fix issues with class names

#### 0.2.0 - *(03/10/17)*
- Allow specifying tooltip class name and wrapper class name

#### 0.1.4 - *(03/10/17)*
- Upgrade popper.js to 1.x.x

#### 0.1.1 - *(09/29/16)*
- Guard against updating popper state when unmounted

#### 0.1.0 - *(09/28/16)*
- Initial release

[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/

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