# rn-tooltip

> *Simple, lightwweight and **blazing fast** react native tooltip*

Latest version **3.0.3** (published 2022-09-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-tooltip
pnpm add rn-tooltip
yarn add rn-tooltip
bun add rn-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 | 3.0.3 |
| Published | 2022-09-05 |
| First published | 2018-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 20.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 330 |
| Author | AndreiCalazans |
| Maintainers | andreixoc |

## Links

- npm: https://www.npmjs.com/package/rn-tooltip
- Repository: https://github.com/AndreiCalazans/rn-tooltip
- Homepage: https://github.com/AndreiCalazans/rn-tooltip#readme
- npm.io page: https://npm.io/package/rn-tooltip

## Dependencies (1)

- [deprecated-react-native-prop-types](https://npm.io/package/deprecated-react-native-prop-types.md) ^2.3.0

## Recent versions

- 3.0.3 (latest) — 2022-09-05
- 3.0.2 — 2022-07-10
- 3.0.1 — 2021-01-24
- 3.0.0 — 2020-08-22
- 2.0.0 — 2019-11-15
- 1.3.0 — 2019-08-15
- 1.2.0 — 2019-07-13
- 1.1.3 — 2019-07-01
- 1.1.2 — 2019-03-07
- 1.1.1 — 2019-03-07
- 1.1.0 — 2019-03-07
- 1.0.1 — 2018-08-02
- 1.0.0 — 2018-06-02
- 0.0.2 — 2018-05-05
- 0.0.1 — 2018-05-05

## README

[![npm version](https://badge.fury.io/js/rn-tooltip.svg)](https://badge.fury.io/js/rn-tooltip)


# rn-tooltip

*Simple, lightwweight and **blazing fast** react native tooltip*


<img src="./tooltipExample.gif" width='250' />

Expo App if you want to try it out: https://expo.io/@andreixoc/RNTooltipTester

Code for the Expo app is here: https://github.com/andreiCalazans/rnTooltipTester

## Install

`yarn add rn-tooltip`

or

`npm install rn-tooltip --save`



## Usage

```js
import { Text } from 'react-native';
import Tooltip from 'rn-tooltip';

...

<Tooltip popover={<Text>Info here</Text>}>
  <Text>Press me</Text>
</Tooltip>
```

## Props

* [`backgroundColor`](#backgroundcolor)
* [`containerStyle`](#containerStyle)
* [`height`](#height)
* [`highlightColor`](#highlightColor)
* [`onClose`](#onClose)
* [`onOpen`](#onOpen)
* [`pointerColor`](#pointerColor)
* [`pointerStyle`](#pointerStyle)
* [`popover`](#popover)
* [`actionType`](#actionType)
* [`width`](#width)
* [`withOverlay`](#withOverlay)
* [`overlayColor`](#withOverlay)
* [`withPointer`](#withPointer)
* [`toggleWrapperProps`](#toggleWrapperProps)

---

## Reference

### `backgroundColor`

sets backgroundColor of the tooltip and pointer.

|  Type  | Default |
| :----: | :-----: |
| string | #617080 |

---

### `containerStyle`

Passes style object to tooltip container

|      Type      |      Default      |
| :------------: | :---------------: |
| object (style) | inherited styling |

---

### `height`

Tooltip container height. Necessary in order to render the container in the
correct place. Pass height according to the size of the content rendered inside
the container.

|  Type  | Default |
| :----: | :-----: |
| number | string |   40    |

---

### `highlightColor`

Color to highlight the item the tooltip is surrounding.

|  Type  |   Default   |
| :----: | :---------: |
| string | transparent |

---

### `onClose`

function which gets called on closing the tooltip.

|   Type   | Default  |
| :------: | :------: |
| function | () => {} |

---

### `onOpen`

function which gets called on opening the tooltip.

|   Type   | Default  |
| :------: | :------: |
| function | () => {} |

---

### `pointerColor`

Color of tooltip pointer, it defaults to the
[`backgroundColor`](#backgroundcolor) if none is passed .

|  Type  |                Default                |
| :----: | :-----------------------------------: |
| string | [`backgroundColor`](#backgroundcolor) |

---

### `pointerStyle`

Passes style object to tooltip pointer view

|      Type      |      Default      |
| :------------: | :---------------: |
| object (style) | inherited styling |

### `popover`

Component to be rendered as the display container.

|     Type      | Default |
| :-----------: | :-----: |
| React.Element |  null   |

---

### `actionType`

Flag to determine how the tooltip reacts to presses.

|  Type   | Default |
| :-----: | :-----: |
| press or none or longPress | press |

---

### `width`

Tooltip container width. Necessary in order to render the container in the
correct place. Pass height according to the size of the content rendered inside
the container.

|  Type  | Default |
| :----: | :-----: |
| number | number |   150   |

### `withOverlay`

Flag to determine whether or not dislay overlay shadow when tooltip is open.

|  Type   | Default |
| :-----: | :-----: |
| boolean |  true   |

### `overlayColor`

Sets backgroundColor of the overlay.

|  Type   | Default |
| :-----: | :-----: |
| string  |  rgba(250, 250, 250, 0.70)   |

### `withPointer`

Flag to determine whether or not dislay pointer.

|  Type   | Default |
| :-----: | :-----: |
| boolean |  true   |

### `toggleWrapperProps`

Drills TouchableOpacity Props down to the TouchableOpacity wrapper that toggles the Tooltip.

|      Type      |      Default      |
| :------------: | :---------------: |
| TouchableOpacityProps | {} |


**MIT Licensed**

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