React – Getting started with tooltips

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>

• Share on Facebook