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: string | null; activeAnchor: HTMLElement | null }) => ChildrenType

• content is available for quick access to 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)
• ChildrenType is essentially the same as React.ReactNode

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>
  )}
/>

◕‿‿◕◕‿‿◕◕‿‿◕