# react-png-tooltip
> A graphical user interface element that will render when the user hovers over (optional) or clicks an item, a tooltip may appear with information about said item.
Latest version **1.2.0** (published 2019-03-28) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install react-png-tooltip
pnpm add react-png-tooltip
yarn add react-png-tooltip
bun add react-png-tooltip
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-03-28 |
| First published | 2019-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 164.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | rmolinamir |
| Maintainers | rmolinamir |
| Keywords | react, png-ui, tooltip, responsive, library, component |
## Links
- npm: https://www.npmjs.com/package/react-png-tooltip
- Repository: https://github.com/rmolinamir/react-png-tooltip
- Homepage: https://github.com/rmolinamir/react-png-tooltip#readme
- Issues: https://github.com/rmolinamir/react-png-tooltip/issues
- npm.io page: https://npm.io/package/react-png-tooltip
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.2.0 (latest) — 2019-03-28
- 1.1.10 — 2019-03-08
- 1.1.8 — 2019-03-04
- 1.1.7 — 2019-03-04
- 1.1.6 — 2019-03-04
- 1.1.5 — 2019-02-24
- 1.1.4 — 2019-02-24
- 1.1.3 — 2019-02-24
- 1.1.2 — 2019-02-17
- 1.1.1 — 2019-02-15
- 1.1.0 — 2019-02-15
- 1.0.9 — 2019-02-15
- 1.0.8 — 2019-02-15
- 1.0.7 — 2019-02-15
- 1.0.6 — 2019-02-15
- … 7 more at https://npm.io/package/react-png-tooltip/versions
## README
# React Plug-N'-Go Tooltip
> A graphical user interface element that will render when the user hovers over (optional) or clicks an item, a tooltip may appear with information about said item.
[](https://www.npmjs.com/package/react-png-tooltip) [](https://standardjs.com)
## Install
```bash
npm install --save react-png-tooltip
```
## [Showcase](https://www.robertmolina.dev/codelab/react-png-tooltip)
### [Servify](https://www.servifyapp.com "Servify Website")
## Instructions
1. Export the tooltip from the 'react-png-tooltip' and you're good to go!
2. The tooltip will open after:
- Clicking (or touching) the tooltip button.
- Hovering over the tooltip button.
3. The tooltip will close after:
- Pressing the ESC key on desktop.
- Clicking (or touching) anywhere on the screen unless it's inside the tooltip window.
- Clicking (or touching) the X button inside the tooltip window.
- On mouse leave IF the user has not clicked the tooltip (meaning, if the user was only hovering), in which case the user would have to click the cancel button, the ESC key, or anywhere on the screen to close the tooltip.
## Features
1. ESC key event listener triggered for desktop users, pressing it will close the modal.
2. You can place it anywhere on your DOM tree.
3. Can handle any type of children. It has a set width of 380px **and a max-width of 80vw**, this can't be changed for the time being.
4. **Smart-Potisioning** (illustration below), the tooltip is programmed to determine its initial rendering position and will make calculations depending on where it is, the viewport and its width to avoid overflowing outside the viewport.
5. Tooltip window's CSS may be changed without disrupting the functionality of the component (**don't change the positions, if you want something absolutely position then do it through an inner div**).
6. Instead of using the default tooltip button, you can pass your own buttons through a prop named **tooltip**, usage example and more props information below.
7. Clicking and hovering functionalities may be disabled by passing `shouldDisableClick` and `shouldDisableHover` props respectively to the tooltip.
## Props
Props | Functionality
------------- | -------------
`shouldDisableHover` | Disables hovering functionality, the tooltips will only render upon clicking the tooltip.
`shouldDisableClick` | Disables clicking functionality, the tooltips will only render upon hovering the tooltip. If passed as true, then the tooltip's cancel button will **not** be rendered.
`tooltip` | Your custom JSX button that will toggle the tooltip window, **must be JSX**.
`fill` | The fill prop will change the default icon **question-mark** color, e.g. `'#484848'` or `'red'` **(must be a string)**.
`background` | The background prop will change the default icon background color, e.g. `'#0000FF'` or `'blue'` **(must be a string)**.
`wrapperClassName` | You may change the wrapper CSS class if you don't like the default one (`display: inline-table; position: 'relative'`), the wrapper is the outer div that wraps the whole tooltip (content and icon). **Make sure you set position relative if you decide to change the wrapperClassName, or else the positioning may be problematic**.
`className` | You can use your own desired CSS class for the tooltip window by passing said class as a prop, pass them with the `!important` tag to overwrite the default ones, **however, it is highly advised to only modify background-color, color, fill, border-colors, etc (aesthetics). Modifying width nor any similar properties is not recommended as of now.** Usage examples below.
## CodeSandbox
[](https://codesandbox.io/s/xoy31rxo)
## Basic Usage
```jsx
import React, { Component } from 'react'
import Tooltip from 'react-png-tooltip'
const component = () => {
return (
The tooltip will accept any type of children.
)
}
```
## Passing a CSS class
```css
.IndianredTooltip {
background-color: #cd5c5c;
color: #FFF;
fill: #FFF;
}
```
```jsx
import React, { Component } from 'react'
// CSS
import classes from './yourcss.css'
// JSX
import Tooltip from 'react-png-tooltip'
const component = () => {
return (
The tooltip will accept any type of children.
)
}
```
### Or if using CSS modules
```jsx
import React, { Component } from 'react'
// CSS
import classes from './yourcss.css'
// JSX
import Tooltip from 'react-png-tooltip'
const component = () => {
return (
The tooltip will accept any type of children.
)
}
```
## Passing a custom tooltip button
### Note that you can also pass classes to the Tooltip as normal, or modify the default icon's fill and background.
```jsx
import React, { Component } from 'react'
// CSS
import classes from './yourcss.css'
// JSX
import Tooltip from 'react-png-tooltip'
const component = () => {
return (
Your custom button!}>
And it still works as you'd expect! The tooltip's content would go inside.
)
}
```
## License
MIT © [rmolinamir](https://github.com/rmolinamir)
---
_Source: https://npm.io/package/react-png-tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._