Get tooltip content dynamically in the render method

[alfonsomunozpomer]

Get the tooltip content in the render method using a function instead of setting it in state.placeholder. This allows for the tooltip contents to change dynamically and react to changes to props (or be hidden if you return null in the getContent prop).

[huumanoid]

Thank you for your contribution!
It seems like the bottom examples at http://wwayne.com/react-tooltip/ doesn't work with your PR applied. What can we do with it?

[wbazant]

@alfonsomunozpomer I think it's because you take out the code which sets this.intervalUpdateContent ?

[alfonsomunozpomer]

@wbazant I think you’re right. Quite an oversight from my part... I’ll fix it tomorrow!

[alfonsomunozpomer]

@huumanoid I’ve now tested it and everything looks fine.

Notice, though, that the tooltip content changes as you move the mouse, which is the intentded behaviour at least in our use case. updateTooltip is invoked with every mouse movement which, in turn, calls getContent. If you want to have different tooltips for the same target depending on the region where you are hovering (or because some other changes in props) this is necessary. If you want to avoid this, maybe a new boolean prop can be added, e.g. dynamicContent, to have the tooltip content be set in the state or computed for every render. However, I think it’s a bad idea and unneeded complexity unless a substantial number of users prefer the old way.

[huumanoid]

Thank you for a quick fix!
Your opinion is reasonable about unneeded complexity is reasonable.

If you want to have different tooltips for the same target depending on the region where you are hovering

Use case you mentioned sounds interesting!
Could you tell me more, please?

As far as I understand:
For example, we've got a single <span data-tip> with text into it.
And we want to show different content depending on which word is hovered right now.
Is getContent suitable for it?

Is svg with a complex content relates to this use case?

Why don't user pass changes to props.children instead? Why do we need to make getTooltipContent called every time the updateTooltip is called?

[alfonsomunozpomer]

Precisely our use case is that we have a SVG, more specifically a Highcharts heatmap (we’re using react-highcharts). It can fire events when you hover the mouse pointer over different parts of the chart, and we pass a callback from the react-tooltip container component that changes the contents of the tooltip depending on the hovered element (i.e. the event fired).

Yes, getContent works perfectly in our case, but the problem was that the tooltip didn’t change. It kept the contents of the first rendered area, and that’s why I changed the code to be called on updateTooltip.

Let me know if anything is unclear.

[datzun]

@huumanoid any chance of this getting merged soon? Also running into this problem. ☹️

[NathanBWaters]

Also running into this problem.

[SamMcFaddenBJSS]

+1 Please can you merge this branch as am having the same issue. Cheers dude :-)

[Tommy10802]

Same here pls merge this fix asap thanks a lot

[seanmhanson]

+1

@huumanoid is there any hope of getting this merged in? This is definitely causing me issues I am not enjoying working around.

[Soletiq]

+1

[egarza54]

Any update on this pull request?

[utajum]

Can you please merge this.

Thank you

[dokinoki]

I had the same issue, content would not reload, I fixed it in the meantime by doing the following:

This case does not reload the UI when props change

<ReactTooltip>
    <Component {...someProps} />
</ReactTooltip>

This case does reload the UI when props change

<ReactTooltip 
    getContent={[() => <Component {...someProps} />]}
/>

[aronhelser]

I like this change, but it does change the behavior of the API - the left example in the last row of http://wwayne.com/react-tooltip/ uses getContent={() => Math.floor(Math.random() * 100)} and that now changes every time the mouse moves, instead of changing only when the tooltip is shown. The right example also updates every time the mouse moves, and at a 1 sec interval if the mouse is still.

Is there a reason this shouldn't be merged because of this?
Re-reading @alfonsomunozpomer explanation above, this was intended behavior. I'm fine with that.

[aronhelser]

🎉 This PR is included in version 3.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[slimgabsi]

the solution is to hide and then show the tooltip on state change and if your cmp is hovered .
Note that am using functional cmps and useRef hook
I guess you can do the same with componentDidUpdate()
use onMouseEnter and onMouseLeave to set the hovred state

        const handleOnMouseLeave = () => {
		setIsHovered(false);
	};
	const handleOnMouseEnter = () => {
		setIsHovered(true);
	};

		useEffect(() => {
       if (myRef?.current && isHovered) {
		ReactTooltip.hide();
		ReactTooltip.show(myRef.current);
	}, [myState]);