React tooltip component, inspired by tooltipsy (a jquery plugin I've used)

npm install react-tooltip --save

1 . 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}}/>

MIT