Skip to main content

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.

V4V5
data-fordata-tooltip-id
data-tipdata-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

V4V5
typevariant

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.