npm install react-tooltip-15sh
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