npm install uiatar-react-tooltip[download-image]: https://img.shields.io/npm/dm/react-tooltip.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-tooltip
``sh`
npm install react-tooltip
1 . Require react-tooltip after installation
`js`
import ReactTooltip from 'react-tooltip'
2 . Add data-tip = "your placeholder" to your element Tooltip
`jsx`
3 . Including react-tooltip component
`js`
Standalone
You can import node_modules/react-tooltip/standalone/react-tooltip.min.js into your page, please make sure that you have already imported react and react-dom into your page.
place: top effect: float as default attribute, you don't have to add these options if you don't want to change default
* The option you set on component will be implemented on every tooltip in a same page:
* The option you set on specific element, for example: will only make effect on this specific tooltipCheck example: React-tooltip Test
Global|Specific |Type |Values | Description
|:---|:---|:---|:---|:----
place | data-place | String | top, right, bottom, left | placement
type | data-type | String | success, warning, error, info, light | theme
effect| data-effect | String | float, solid | behaviour of tooltip
event | data-event | String | e.g. click | custom event to trigger tooltip
eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute)
globalEventOff | | String| e.g. click| global event to hide tooltip (global only)
isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture
offset | data-offset | Object | top, right, bottom, left |
data-offset="{'top': 10, 'left': 10}" for specific and offset={{top: 10, left: 10}} for global
multiline | data-multiline | Bool | true, false | support , to make multiline
className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class
html | data-html | Bool | true, false | or
delayHide | data-delay-hide | Number | | or
delayShow | data-delay-show | Number | | or
insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)
border | data-border | Bool | true, false | Add one pixel white border
getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
afterShow | null | Func | () => {} | Function that will be called after tooltip show
afterHide | null | Func | () => {} | Function that will be called after tooltip hide
disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false
scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true
resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true
wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is divUsing react component as tooltip
Check the example React-tooltip Test##### Note:
1. data-tip is necessary, because
find tooltip via this attribute
2. data-for correspond to the id of
3. When using react component as tooltip, you can have many in a page but they should have different idStatic Methods
###ReactTooltip.hide(target)> Hide the tooltip manually, the target is optional, if no target passed in, all exitent tooltip will be hiden
`js
import {findDOMNode} from 'react-dom'
import ReactTooltip from 'react-tooltip'
`###ReactTooltip.rebuild()
> Rebinding all tooltips
###ReactTooltip.show(target)
> Show specific tooltip manually, for example:
js
import {findDOMNode} from 'react-dom'
import ReactTooltip from 'react-tooltip'
`Trouble Shooting
$3
The component was designed to set a one place then use tooltip everywhere, but a lot of people stuck in using this component with modal, you can check the discussion here, the summarization of solving the problem is as following:1. Put
out of the
2. Use when opening the modal
3. If your modal's z-index happens to higher than the tooltip, use the attribute className to custom your tooltip's z-index>I suggest always put
in the Highest level or smart component of Redux, so you might need these static
method to control tooltip's behaviour in some situations$3
When you set getContent={() => { return }} you will find the tooltip will dispaly true, that's because React will set the value of data-* to be 'true' automatically if there is no value to be set. So you have to set data-tip='' in this situaction.`jsx
{ return null }}/>
`Same for empty children, if you don't want show the tooltip when the children is empty
jsx
{}
``MIT