React tooltip component, inspired by tooltipsy (a jquery plugin I've used)
npm install react-tooltip --save1 . Require react-tooltip after installation
var ReactTooltip = require("react-tooltip")2 . Include css or scss file(you can find them in dist folder) into your project
sass: @import "react-tooltip";3 . Add data-tip = "your placeholder" to your element
<p data-tip="hello world">Tooltip</p> 4 . Including react-tooltip component
<ReactTooltip />Every option has default value, You don't need to add option if default options are enough.
The options set to <ReactTooltip /> will affect all tootips in a same page and options set to specific element only affect the specific tooltip's behaviour.
Check example: React-tooltip Test
Specific element: <p data-tip="tooltip" data-place="top"></p> global: <ReactTooltip place="top"/>Specific element: <p data-tip="tooltip" data-type="dark"></p> global: <ReactTooltip type="dark"/>Specific element: <p data-tip="tooltip" data-effect="float"></p> global: <ReactTooltip effect="float"/>Specific element: <p data-tip="tooltip" data-position="{'top': 10, 'left': 10}"></p> global: <ReactTooltip type="float" position={{top: 10, left: 10}}/>Specific element: <p data-tip="tooltip a b" data-multiline="true"></p> <p data-tip="tooltip<br>a<br />b" data-multiline={true}></p> global: <ReactTooltip multiline={true}/>MIT