🐛 Bug report

I'm developing a feature where hovering over a tab shows a tooltip that previews the contents of that tab. The content is an HTML video stream, and for development purposes, I'm rendering a scene using Babylon.js, a 3D engine.

The bug is that sometimes, when I hover over the trigger, the tooltip opens and then immediately closes.

• In production, when using an actual video stream element, this happens roughly 1 out of 10 times.
• In development, when using the 3D scene simulation, it happens about 3 out of 4 times.

I tried to reproduce this bug in an isolated environment but was only able to do so when using the 3D engine. However, there are still differences between the reproduction and my development environment. For example:

• In the reproduction, the bug occurs more frequently when multiple scenes are rendered.
• In the reproduction, the bug occurs less frequently when the developer tools are open.

I don't know if this is a Zag.js issue, or external library issue, and I don't know if there is more than one bug here. I'm honestly at my wits' end. My guess is that its potentially related to a race condition that happens when the tooltip contents are first mounted.

💥 Steps to reproduce

1. Go to reproduction.
2. Hover over trigger.
3. See that the tooltip closes immediately after hovering.
4. Play around with the tooltip contents and window size, and see that the frequency changes.

💻 Link to reproduction

https://stackblitz.com/edit/d2lrbd4p?file=src%2FTooltip.tsx

I've disabled all props responsible for closing the popover in the reproduction above.

🧐 Expected behavior

The tooltip should not close immediately upon hover.

🧭 Possible Solution

My current solution is to disable unmounting in the background. This fixes the bug for subsequent hovers, but sometimes the first hover still triggers the bug.

My last resort is to use a fully controlled popover instead and handle the trigger hover state manually.

🌍 System information