react-tooltip

[![npm download][download-image]][download-url]

[download-image]: https://img.shields.io/npm/dm/react-tooltip.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-tooltip

$3

``sh
npm install react-tooltip
`

$3

Using NPM

1 . Require react-tooltip after installation

`js
var ReactTooltip = require("react-tooltip")
`

2 . Add data-tip = "your placeholder" to your element

Tooltip

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.

$3

Notes:
* The tooltip is using type: dark 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 elecment, for example: will only make effect on this specific tooltip

Check example: React-tooltip Test

Global | Specific | Type | Values | Description
:-----------|:-------------|:----------|:----------|:------------------
place | data-place | String | top, right, bottom, left | tooltip's placement
type | data-type | String | success, warning, error, info, light | tooltip's color theme
effect | data-effect | String | float, solid | either float or pinned
event | data-event | String | e.g. click | custom event to trigger tooltip
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
class | data-class | String | your custom class | extra custom class, can use !important to cover react-tooltip's default class
html | data-html | Bool | true, false |

or
delayHide | data-delay-hide | Number | |

or
delayShow | data-delay-show | Number | |

or
border | data-border | Bool | true, false | Add one pixel white border

$3

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 id

$3

ReactTooltip.hide() for hide the tooltip manually

ReactTooltip.rebuild() for re-bind tooltip to the corresponding element

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

MIT