Popover tooltips don't seem to work with React routing

[jyap0107]

Maybe this is my inexperience but regardless I'll ask.

I followed the quick start guide for tooltips and essentially copied one of the example styles for a tooltip and integrated it into my code. It works perfectly while I'm on the page and in testing.

However, when I route from one part of my application to the page with the tooltip, it never seems to trigger. I have the tooltip on a button and the button works fine, but the tooltip never appears. It only appears after refreshing the page.

As it works fine otherwise and since I followed the quick start guide to a tee, I'm wondering if this is more of a flowbite issue than an issue on my end. I'm not sure if this is related to the issue regarding React interactive elements in a previous post.

This is my tooltip div:
<div id="tooltip" role="tooltip" className="inline-block absolute z-10 py-2 px-3 text-xs font-sm text-white bg-slate-700 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"> Tooltip text <div className="tooltip-arrow" data-popper-arrow></div> </div>

It's exactly the same as the one on the quick start page. The div is directly below/is a sibling of the target div. Upon removing opacity-0. the tooltip initially shows on page load, but disappears upon mouse enter and leave. The image below shows this.

Upon routing to the page with the tooltip, however, the tooltip is rendered directly over some other part of my page, and never disappears unless you refresh the page, bringing it back to where it should be.