Skip to main content

Provider/wrapper

Using multiple anchors elements with a single ReactTooltip component.

danger

This has been deprecated. Use the data-tooltip-id attribute, or the anchorSelect prop instead. Click here for more details.

Setting up <TooltipProvider />​

To get the <TooltipWrapper /> to work, your component must be inside the <TooltipProvider />. For simplicity, just wrap your whole application with the provider.

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

function App() {
  return (
    <TooltipProvider>
      <MyComponent />
    </TooltipProvider>
  )
}

export default App

Using <TooltipWrapper />​

import { Tooltip, TooltipWrapper } from 'react-tooltip';

<TooltipWrapper content="I am using a global tooltip!">
  <a> ◕‿‿◕ </a>
</TooltipWrapper>
<TooltipWrapper content="This is the same tooltip!">
  <a> ◕‿‿◕ </a>
</TooltipWrapper>
// the tooltip component can be placed anywhere inside the provider
<Tooltip />
◕‿‿◕◕‿‿◕

Multiple tooltips​

danger

Reminder that this has been deprecated. Use the data-tooltip-id attribute, or the anchorSelect prop instead. Click here for more details.

If you need to use multiple tooltips, each with multiple anchors, use the tooltip id prop, and the wrapper tooltipId prop.

import { Tooltip, TooltipWrapper } from 'react-tooltip';

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