Styles gone after revisting page

[Joseppi83]

So I'm using react-tooltip for a register form. When I redirect to the login page, then redirect back to the register page with the register form, all the styles are gone from the tooltips. The text and css transitions still function, but the background and text color is gone.

I rebuild the tooltip bindings in useEffect with the following: useEffect(() => { ReactTooltip.rebuild(); });

Anyone having similar problems?

[Joseppi83]

So it looks like on the redirect from register to login and back to register, that the tooltip's div element is being assigned a different hashed class. The styles are in the console, but it's assigned to a different hashed className.

[faahim]

Having the mismatched hashed class name issue too. No style is being applied because the class name in <style> and the class name on the element doesn't match.

[s-ashwinkumar]

@faahim Had the same issue.To circumvent it for now, pass a 'uuid' prop to the styling component and it will not generate one on its own on re-render. Haven't seen anything break because of this fix.... yet. <ReactTooltip uuid="<some-uuid-here>" />

• https://github.com/wwayne/react-tooltip/blob/master/src/index.js#L89 -> this shows that it generates a new uuid if it is not passed down.
• https://github.com/wwayne/react-tooltip/blob/master/src/index.js#L680 -> shows where it is used to generate the class name on the div
• https://github.com/wwayne/react-tooltip/blob/master/src/index.js#L678 -> shows where it is used to generate the styles with that classname. This generated styles don't appear on reload that said it appears if reloading the base page. Haven't dug in to find out why for now (best guess is server side rendering)

@Joseppi83 thanks for raising this. Helped me zero in on the temp fix.

PS : Found the source issue which allows us to do the aforementioned fix - https://github.com/wwayne/react-tooltip/issues/580 which is what led to adding the use of a prop uuid.

[faahim]

@s-ashwinkumar Woo, thanks so much for all those info! When I saw it has mismatched hashes, I felt like, gosh, if it generates new ones every time, and it can go wrong, then it will go wrong at least some of the time. I know it can be reliable (UUID looks like a solid fix here), but my OCD brain wouldn't give me the peace of mind. 😅

I'm overriding the stylings with a custom class name for now. But will use uuid approach next time.

Thanks a ton!

[frmysantana]

Is there a more permanent fix? I'm seeing this happen already in my dev environment with only a few tooltips. I tried the uuid approach, but that actually broke more tooltips.

Overriding the styles with custom classes seems to work far better.