Tooltip is a floating element that displays information related to an anchor element when it receives keyboard focus or the mouse hovers over it.
Installation
npm install react-tooltip
Usage
1. You must import the CSS file or the tooltip won’t show. You can do it on your src/index.js
or equivalent file.
import 'react-tooltip/dist/react-tooltip.css'
2. Import react-tooltip
.
import { Tooltip } from 'react-tooltip'
3. Add data-tooltip-id="<tooltip_id>"
, data-tooltip-content="<tooltip_text>"
and <Tooltip />
element.
<div data-tooltip-id="demoTooltip" data-tooltip-content="Tooltip text">
Tooltip demo
</div>
<Tooltip id="demoTooltip" />
Multiple tooltips usage
Assign a tooltip to more elements.
<span className="demo-tooltip">Demo text 1</span>
<br />
<span className="demo-tooltip">Demo text 2</span>
<br />
<span className="demo-tooltip">Demo text 3</span>
<Tooltip anchorSelect=".demo-tooltip" place="top">
Tooltip text
</Tooltip>
Clickable tooltip
<span className="demo-tooltip">Demo text 1</span>
<Tooltip anchorSelect=".demo-tooltip" place="top" clickable>
Tooltip text
<button>Tooltip button</button>
</Tooltip>