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.