Styles gone after revisting page

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?

[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!