Getting Started
This docs is related to V5, if you are using V4 please check here.
A react tooltip is a floating react 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
or
yarn add react-tooltip
Usage
If you've been using V5 for a while, you'll notice we've deprecated the anchorId
prop in favor of the data-tooltip-id
attribute, or the anchorSelect
prop.
For more info and more complex use cases using anchorSelect
, check the examples.
Set the default styling
You must import the CSS file or the tooltip won't show!
import 'react-tooltip/dist/react-tooltip.css'
This needs to be done only once. We suggest you do it on your src/index.js
or equivalent file.
For advanced styling, check the examples.
There are two ways to use ReactTooltip.
- Using props into ReactTooltip Element.
- Using data-attributes on anchor element.
Using anchor data attributes
1 . Import react-tooltip
after installation.
import { Tooltip } from 'react-tooltip'
2 . Add data-tooltip-id="<tooltip id>"
, data-tooltip-content="<your placeholder>"
and other attributes to your elements.
Click here the full list of available data attributes.
<a
data-tooltip-id="my-tooltip"
data-tooltip-content="Hello world!"
data-tooltip-place="top"
>
◕‿‿◕
</a>
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello to you too!">
◕‿‿◕
</a>
3 . Create <Tooltip />
element and set the id
prop.
Don't forget to set the tooltip id, or it will not work!
<Tooltip id="my-tooltip" />
Using ReactTooltip props
1 . Import react-tooltip
after installation.
import { Tooltip } from 'react-tooltip'
2 . Create anchor elements.
<a className="my-anchor-element">◕‿‿◕</p>
<a className="my-anchor-element">◕‿‿◕</p>
<a className="my-anchor-element">◕‿‿◕</p>
3 . Create <Tooltip />
element and set the anchorSelect
prop.
anchorSelect
must be a valid CSS selector. Click here for more info.
Click here the full list of available tooltip props.
<Tooltip anchorSelect=".my-anchor-element" place="top">
Hello world!
</Tooltip>
Clickable tooltip
By default, you can't interact with elements inside the tooltip. To allow for proper usage of elements such as buttons and inputs, use the clickable
prop.
<a id="not-clickable">◕‿‿◕</a>
<Tooltip anchorSelect="#not-clickable">
<button>You can't click me :(</button>
</Tooltip>
<a id="clickable">◕‿‿◕</a>
<Tooltip anchorSelect="#clickable" clickable>
<button>You can click me!</button>
</Tooltip>
Styling
Basic styling can be done by overriding the following css variables. For advanced styling, check the examples.
:root {
--rt-color-white: #fff;
--rt-color-dark: #222;
--rt-color-success: #8dc572;
--rt-color-error: #be6464;
--rt-color-warning: #f0ad4e;
--rt-color-info: #337ab7;
--rt-opacity: 0.9;
}