Skip to main content
Version: v6

Provider/wrapper

Using multiple anchor elements with a single ReactTooltip component.

danger

This API was deprecated in v5 and removed in v6. Use the data-tooltip-id attribute, or the anchorSelect prop instead. Click here for more details.

Replacing <TooltipProvider />​

You no longer need a provider. Render a tooltip instance near your app root or near the anchors it controls.

// this is usually the `src/App.jsx` (or `src/App.tsx`) file
import { Tooltip } from 'react-tooltip'

function App() {
  return (
    <>
      <MyComponent />
      <Tooltip id="app-tooltip" />
    </>
  )
}

export default App

Replacing <TooltipWrapper />​

import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="global-tooltip" data-tooltip-content="I am using a global tooltip!">
  ◕‿‿◕
</a>
<a data-tooltip-id="global-tooltip" data-tooltip-content="This is the same tooltip!">
  ◕‿‿◕
</a>
<Tooltip id="global-tooltip" />

Multiple tooltips​

If you need to use multiple tooltips, give each group of anchors a different data-tooltip-id.

import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="tooltip-1">◕‿‿◕</a>
<a data-tooltip-id="tooltip-1">◕‿‿◕</a>
<a data-tooltip-id="tooltip-2">◕‿‿◕</a>
<a data-tooltip-id="tooltip-2">◕‿‿◕</a>
<Tooltip id="tooltip-1" content="I am using tooltip-1" />
<Tooltip id="tooltip-2" content="I am using tooltip-2" />