What exactly does ReactTooltip rebuild do, and when is it required?

[manatarms]

Thanks for this awesome library. I had a question about the static rebuild method.

I have been using ReactTooltip in my application and it works in certain places. The places that it doesn't work in requires a rebuild (like below) to make it work.

componentDidUpdate() {
    ReactTooltip.rebuild();
}

When exactly is it necessary to do a rebuild? And what is it doing? Thanks!

[sindhuja11]

Also the tooltip is shown twice when calling ReactTooltip.rebuild() in componentDidUpdate if ReactTooltip.rebuild() is not called it is not showing tooltip at all.

[CWSites]

Any update here? Seems like a pretty straightforward question.

[xheory]

@CWSites I just ran into this and it appears to be related to components with the data-for props loading later than the ReactTooltip component.

E.g. I had a dynamically loading infinite scrolling feed, and the first 'page' loaded the tooltip correctly for all its subcomponents. I use one tooltip to cover all those elements, which worked fine for the entries that were loaded before the tooltip was. However, if I loaded more content afterwards, the tooltip would not show for newer content. Calling rebuild() after loading new content fixed that, as it rebinds the newly loaded data-for-containing components to the tooltip.

[mattpardee]

To put it in the right place my implementation has

useEffect(() => {
  ReactTooltip.rebuild();
});

...and originally I had <ReactTooltip effect='solid' /> after the element that has the tooltip, but it had the double-placement issue referenced above. I have multiple <ReactTooltip /> calls in my code (in this case elsewhere in a global navigation component). By removing this specific child-component-file's calling of <ReactTooltip effect='solid' /> it resolved the double-placement issue. This is a bit unfortunate as if I remove the <ReactTooltip /> call elsewhere then I could run into the issue of the tooltip not being shown here. Anyway maybe this helps other people; see if you're invoking it in more than one location.

[harshil-darji]

I have only one instance of <ReactTooltip /> in a global layout component. There, I am calling componentDidUpdate() { ReactTooltip.rebuild(); }

It is working all fine for most components. The problem arises for components where I am using something like: this.state.data && <MyComponent />

and within MyComponent I am using the react-tooltip. I could call componentDidUpdate method on MyComponent but for a huge project, it is too cumbersome to add it everywhere. Any suggestions?

[throttlehead]

Just a heads up for anyone winding up here looking at this that this function can be very expensive. We have a paged list component that allows users to set up to 50 items per page. This function was being fired once per item on every render. Trying to change pages would basically max out my CPU for 30 seconds.

I was able to remove it and our tool-tips still worked fine. If you're having issues requiring the use of this function you can most likely fix them by reexamining your render function tree. If I had to guess I would say your issue might be that the tooltip is rendered before the elements that reference it with their data attributes, resulting in it not getting bound. Or maybe your tip resides in a completely different component.

[powelski]

I was thinking, why is React Tooltip designed in a way that needs rebuilding? Why doesn't it use mouse over event on the container to find pointed element's potential tooltips? The way it works now, with the rebuild, feels very jQuery-esque.