Basic examples V4 -> V5
Examples of use in V4 -> V5.
The main changes you should be aware of is the new names for the data attributes.
V4 | V5 |
---|---|
data-for | data-tooltip-id |
data-tip | data-tooltip-content |
V4 or less
import ReactTooltip from 'react-tooltip';
<a
data-tip="Hello world!"
data-for="tooltip"
>
◕‿‿◕
</a>
<ReactTooltip id="tooltip" place="top" />
V5 using data attributes
import { Tooltip } from 'react-tooltip';
<a
data-tooltip-id="my-tooltip"
data-tooltip-content="Hello world!"
>
◕‿‿◕
</a>
<Tooltip id="my-tooltip" place="top" />
V5 using tooltip props
info
Don't forget to check the examples for more details!
import { Tooltip } from 'react-tooltip';
<a className="my-anchor-element">◕‿‿◕</a>
<a className="my-anchor-element">◕‿‿◕</a>
<Tooltip anchorSelect=".my-anchor-element" content="Hello world!" />
◕‿‿◕◕‿‿◕
Colors
V4 | V5 |
---|---|
type | variant |
V4 -> type
import ReactTooltip from 'react-tooltip';
<a data-tip="hello world!" data-for="tooltip"> ◕‿‿◕ </a>
<ReactTooltip id="tooltip" place="top" type="success" />
V5 -> variant
Available values 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'
import { Tooltip } from 'react-tooltip';
<a
data-tooltip-id="my-tooltip"
data-tooltip-content="Hello world!"
data-tooltip-variant="success"
>
◕‿‿◕
</a>
<Tooltip id="my-tooltip" />
See all V5 options here.