bug: Tooltip inside modal delay before text appears (iOS Safari)

[jamedeus]

Reproduction URL (Required)

https://play.tailwindcss.com/pJTbHKPwbq

What version of daisyUI are you using?

5.0.35

Which browsers are you seeing the problem on?

Safari iOS

Describe your issue

On iOS Safari there is a delay before the tooltip text renders if the tooltip is inside a modal. The tooltip background appears with the normal animation, but it is empty until the animation completes, then the text appears. This only happens the first time the tooltip is shown, after that it will work fine (so you'll need to refresh the tailwind play page each time to see it again). In react this can be a bigger problem since it will happen again after the component re-renders.

This happens whether the text is set in data-tip or .tooltip-content, but only if the tooltip is inside a modal (works fine in body). I tried adding a tooltip to a custom component written with <dialog> that does not use DaisyUI modal classes and it works fine there too, so it doesn't appear to be related to HTMLDialogElement. I've only seen this on iOS Safari but haven't tried on OSX Safari.

Real world example:

ScreenRecording_05-26-2025.00-26-11_1.mov

[github-actions]

Thank you @jamedeus for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.