bug: tooltip gap overlap and positions

[shakebox-dev]

Reproduction URL (Required)

https://daisyui.com/components/tooltip/

What version of daisyUI are you using?

v5.0.27

Which browsers are you seeing the problem on?

Safari

Describe your issue

When moving cursor around the page, sometimes tooltip doesn't disappear completely. It ghosts on the screen.

Not related with above but second issue is; it doesn't look uniform during the animation, border between arrow and box becomes visible.

https://github.com/user-attachments/assets/9aa1752a-977c-49b3-a5ee-155deed9be8b

[github-actions[bot]]

Thank you @shakeboxapp-dev 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.

[saadeghi]

When moving cursor around the page, sometimes tooltip doesn't disappear completely. It ghosts on the screen.

That must be a Safari bug.
daisyUI only defines: when it's hovering => it must be visible.
So if the style is stuck, browser must fix it.

I could reproduce it in Safari by entering and exiting the button twice, faster than the animation duration.
Apparently it doesn't happen with tooltip-content as that one uses a new element instead of HTML pseudo elements.

Apparently changing the animation duration can help: https://play.tailwindcss.com/1dJnlNSJXF?file=css or removing the animation "prevents" the issue to happen, but it's still a bug Safari must fix.

it doesn't look uniform during the animation, border between arrow and box becomes visible.

Yes that's something we can fix. The reason this is happening: the tail and box must overlap a little bit otherwise on some computers and some zoom levels, the two elements will show a very think gap between them. this small overlap fixes that issue. And because they animate the opacity, for less than a millisecond their opacities will add up on the overlap part. I should find a solution for this 👍

[delta6626]

That must be a Safari bug. daisyUI only defines: when it's hovering => it must be visible. So if the style is stuck, browser must fix it.

+1 on that. No issues on Firefox.

[shakebox-dev]

When moving cursor around the page, sometimes tooltip doesn't disappear completely. It ghosts on the screen.

That must be a Safari bug. daisyUI only defines: when it's hovering => it must be visible. So if the style is stuck, browser must fix it.

I could reproduce it in Safari by entering and exiting the button twice, faster than the animation duration. Apparently it doesn't happen with tooltip-content as that one uses a new element instead of HTML pseudo elements.

Apparently changing the animation duration can help: https://play.tailwindcss.com/1dJnlNSJXF?file=css or removing the animation "prevents" the issue to happen, but it's still a bug Safari must fix.

it doesn't look uniform during the animation, border between arrow and box becomes visible.

Yes that's something we can fix. The reason this is happening: the tail and box must overlap a little bit otherwise on some computers and some zoom levels, the two elements will show a very think gap between them. this small overlap fixes that issue. And because they animate the opacity, for less than a millisecond their opacities will add up on the overlap part. I should find a solution for this 👍

thank you for the workaround. i would rather let it animate faster rather than having an issue on safari (just saying in case you might also consider to change it until safari fixes the issue).

[shakebox-dev]

also i am not sure if it is possible, but having tooltip positions (like dropdown) would be cool. i almost always end up using before:translate since tooltips easily overflow on mobile view.

[saadeghi]

@shakeboxapp-dev It has 4 placements: https://daisyui.com/components/tooltip/#top

[shakebox-dev]

@shakeboxapp-dev It has 4 placements: https://daisyui.com/components/tooltip/#top

yes, but i meant start/end. because top alone usually requires additional adjustment on mobile view.

[saadeghi]

I'm going to rename the issue title to mention the other challenges you mentioned. I can't do anything about the glitch, as it is something Safari must fix.