Render

Using the ReactTooltip render prop to render dynamic content based on the active anchor element.

Basic usage

The render prop can be used to render the tooltip content dynamically based on the currently active anchor element. The function signature is as follows:

(render: { content: ReactNode | null; activeAnchor: HTMLElement | null }) => ReactNode

• content is the tooltip content (from the content prop or the data-tooltip-content attribute on the anchor element)
• activeAnchor is a ref to the anchor element currently active (or null if no element is active)

import { Tooltip } from 'react-tooltip';

<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="1"
  data-some-relevant-attr="wow"
>
  ◕‿‿◕
</a>
<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="2"
  data-some-relevant-attr="so relevant"
>
  ◕‿‿◕
</a>
<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="3"
  data-some-relevant-attr="much important"
>
  ◕‿‿◕
</a>
<Tooltip
  id="my-tooltip"
  render={({ content, activeAnchor }) => (
    <span>
      The element #{content} is currently active.
      <br/>
      Relevant attribute: {activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'}
    </span>
  )}
/>

◕‿‿◕

◕‿‿◕

◕‿‿◕