---
[](https://www.npmjs.com/package/react-tooltip-z)
[](https://standardjs.com)
---
#### Description
+ It is wrap the tooltip for the element.
+ Customize tooltip `html/css/complex`
+ Append the tooltip outside the root. `portal element`.
---
#### Usage
Install the package
```js
npm install react-tooltip-z
```
Import the module in the place you want to use:
```js
import { Tooltip } from "react-tooltip-z";
// import { Tooltip, useTooltipContext } from "react-tooltip-z";
```
#### Snippet
##### simple
```js
This is jsx Tooltip} // or Component
tooltipClassName="my-class"
placement="right"
// trigger="click"
// onClick={() => alert('event active')} // myClick()
>
```
##### manual + api
```js
// here is the sample, please update it exactly with your source
const [sync, setSync] = useState(false)
// fetch api // do something
fetchApi() {
if (sync) {
setSync(false)
return
}
fetch('api').then(....).then(rs => {
setTodo(todo)
setSync(true)
})
}
{todo.title}e fds}
trigger="manual"
placement='right'
showSync={sync} // manual simple
>
```
##### useTooltipContext + api
```js
// don't use nested context
// here is the sample, please update it exactly with your source
import { Tooltip, useTooltipContext } from "react-tooltip-z";
// ListData.js
{
post.map(item => {
return (
)
})
}
// ListDataItem.js
// use TooltipContext to update tooltip
const { showTooltip, hideTooltip, isShow, tooltipId} = useTooltipContext()
// do something and show tooltip
fetchApi() {
showTooltip('tooltip data after fetch.')
}
This is list data item index.
```
---
#### Props (mains)
| props | type | description |
|----------------------|-------------------------------|-----------------------------------------------------------------------|
| tagName | String | If you wrap all children component, use this |
| tooltipClassName | String | |
| tooltipContent | `String`/`Component`/ `jsx` | Tooltip data |
| placement | `top`/`right`/`left`/`bottom` | it relies on the element's height, width and position to display. |
| trigger | `hover`/`click`/`manual` | Default `hover` |
| backgroundColor | String | Default `#282727` |
| tooltipColor | String | Default `#ffffff` |
| showDelay | Number `250` mini-second | Time delay show tooltip |
| animationDisplay | `fade`/`zoom` | Animate tooltip |
| constrainWidth | Boolean | Fix `max-width: 200px`. Default: `true`. |
| onShown | function | Event after show |
| onHidden | function | Event after hide |
| showSync | Boolean | Simple trigger = manual |
| open | Boolean | Show tooltip |
| hideIfResize | Boolean | hide tooltip if resize screen (Default `true`) |
| hideIfScroll | Boolean | hide tooltip if scroll screen (Default `false`) |
| arrowCentered | Boolean | Show arrow and tooltip on center element (Default false) |
| forceHide | any | when change forceHide, tooltip will be forced hidden (Default null) |
| `...props` | other | Other props of child elements |
#### Note
```js
`top` || `right` || `bottom` || `left` || `placement`: position the element
`...props` here are the props added to the child components. (You should add on child)
`showSync` or `useTooltipContext`: should be used when trigger = `manual`
```
+ `placement`: if the position of the tooltip goes beyond the screen.
It try will move to the right position to be visible.
#### Run
LIVE EXAMPLE
#### License
MIT