First of all, thanks for the improved v5 version. I am currently trying to implement it and it looks really good.

However, I noticed a difference to the v4 version that I cannot seem to find a workaround for:

Written in your documentation: https://react-tooltip.com/docs/examples/children

<a data-tooltip-id="my-tooltip">◕‿‿◕</a> <Tooltip id="my-tooltip"> <div> <h3>This is a very interesting header</h3> <p>Here's some interesting stuff:</p> <ul> <li>Some</li> <li>Interesting</li> <li>Stuff</li> </ul> </div> </Tooltip> 

Starting from this example, I would like to display the content of the hovered element inside this child component. Meaning something like this:

<a data-tooltip-id="my-tooltip" data-tooltip-content="CONTENT">◕‿‿◕</a> <Tooltip id="my-tooltip"> <div> <h3>This is a very interesting header</h3> <p>Here's some interesting stuff:</p> <ul> <li>Some</li> <li>{CONTENT}</li> <li>Stuff</li> </ul> </div> </Tooltip> 

This basically allows a complete custom Tooltip by using the ReactTooltip as a kind of wrapper. So, the display logic is used only inside the children.

In the v4 edition, I did it similar like this:

1. I added getContent={handleContent} to the ReactTooltip
2. Each anchor got a "data-tip" attribute
3. The handleContent method sets a react state (useState) which the children accesses.

Taking the example above, this becomes something like this:

const [tooltipContent, setTooltipContent] = useState(''); const handleContent = dataTip => { if (!dataTip || tooltipContent === dataTip) { return ""; } setTooltipContent(dataTip) } <a data-tooltip-id="my-tooltip" data-tooltip-content="displayed inside the children">◕‿‿◕</a> <ReactTooltip id="my-tooltip" content={handleContent}> <div> <h3>This is a very interesting header</h3> <p>Here's some interesting stuff:</p> <ul> <li>Some</li> <li>{tooltipContent}</li> <li>Stuff</li> </ul> </div> </Tooltip> 

This worked great until v5. Now the setState call messes up the displaying of the Tooltip. The handleContent method is not called for each hover event on an anchor, just for some, otherwise just the plain data-tooltip-content data is displayed. And this also is somewhat consistent to your documentation:

The tooltip children have lower priority compared to the content prop and the data-tooltip-content attribute. Useful for setting default content

But there has to be a way to use a dynamic children, not only for placeholder or default content, right?

Why do I want to use something like that:
I have a complex Tooltip component and a lot of data. There are multiple DOM elements that show the exact same tooltip. So I could add the same data-tooltip-content to each repetitive element, which is a memory issue if the data-tooltip-content data is large.
The solution is:

1. Create a map like this:

{"entry1":"long content for entry1"} {"entry2":"long content for entry2"} {"entry3":"long content for entry3"} 

2. Inside the data-tooltip-content, reference only the keys of the map, not the values:
   <a data-tooltip-content="entry1" ....>anchor text</a>

3. Store the map key ("entry1") inside the react state using the "content" (getContent) method of ReactTooltip

4. Inside the children, access the react state and translate the key to the content (map["entry1"])