npm install react-tooltip1 . Require react-tooltip after installation
var ReactTooltip = require("react-tooltip")2 . Add data-tip = "your placeholder" to your element
<p data-tip="hello world">Tooltip</p>
3 . Including react-tooltip component
<ReactTooltip />Notes:
- The tooltip is using
type: darkplace: topeffect: floatas default attribute, you don't have to add these options if you don't want to change default - The option you set on
<ReactTooltip />component will be implemented on every tooltip in a same page:<ReactTooltip effect="solid" /> - The option you set on specific elecment, for example:
<a data-type="warning"></a>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 | customer 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 <br>, <br /> 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 | <p data-tip="<p>HTML tooltip</p>" data-html={true}></p> or <ReactTooltip html={true} />
delayHide | data-delay-hide | Number | | <p data-tip="tooltip" data-delay-hide='1000'></p> or <ReactTooltip delayHide={1000} />
delayShow | data-delay-show | Number | | <p data-tip="tooltip" data-delay-show='1000'></p> or <ReactTooltip delayShow={1000} />
border | data-border | Bool | true, false | Add one pixel white border
Check the example React-tooltip Test
- data-tip is necessary, because
<ReactTooltip />find tooltip via this attribute - data-for correspond to the id of
<ReactTooltip /> - When using react component as tooltip, you can have many
<ReactTooltip />in a page but they should have different id
ReactTooltip.hide() for hide the tooltip manually
ReactTooltup.rebuild() for re-bind tooltip to the corresponding element
I suggest always put <ReactTooltip /> in the Highest level or smart component of Redux, so you might need these static
method to control tooltip's behaviour in some situations
MIT