bug: Setting `tooltip-end` for tooltip after render lefts extra space on right side only on mobile

[uh-zuh]

Reproduction URL (Required)

https://github.com/uh-zuh/saadeghi_daisyui_bug_tooltip_top_end

What version of daisyUI are you using?

v5.6.12

Which browsers are you seeing the problem on?

No response

Describe your issue

When tooltip is placed near right side of the page there is extra space on the right side of tooltip target.
I prefer to fix it by setting tooltip-end for this case.
It works good on desktop - no extra space on the right side of the page.
But it doesn't work on mobile in same way - extra space is still present after setting my fix.

I have checked on Firefox, Chrome, Safari on iOS 26.5
I have not checked on Android - I have no Android

Reproduction steps:

1. Clone repository
2. Run run-dev.sh/run-dev.cmd
3. Navigate http://<you_wi-fi_IP>:5173/ from desktop browser
4. Scroll right
5. Wait 2 seconds timeout
6. See that extra space on the right side is disappeared
7. Navigate http://<you_wi-fi_IP>:5173/ from your mobile device browser
8. Scroll right
9. Wait 2 seconds timeout
10. See that extra space on the right side is NOT disappeared

[github-actions]

Thank you @uh-zuh 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]

If it's at the very edge of the page and the text is too long, I would suggest, for mobile size moving it to another direction, for example:

max-sm:tooltip-right

Shows the tooltip at the right, only on mobile size.

Also you can change the width of the tooltip using

before:max-w-20

Sets a maximum width size for the tooltip.

Please let me know if these options help.

---

In the future we're going to use CSS anchor positioning and popover API for tooltip, which allows us to move the tooltip automatically if there's no empty space. We're waiting for Safari to support popover="hint" which is required for a tooltip to open on hover.

[uh-zuh]

Setting tooltip-right adds much more extra space on the right side of the page but I need opposite thing - remove this space.
In another words I need to shift tooltip to the left and not to the right.
tooltip-left is not suitable because in this case tooltip overlaps useful content.
Hence tooltip-top with tooltip-end is only option for me.

This issue is not about window size it is about platform or browser specific.
If I set small window size on desktop than my fix works perfectly.
But it doesn't work on mobile device even in landscape mode.

In other words:

• Size of html-tag is decreased if I add tooltip-end before initial render on desktop or mobile with any window size
• Size of html-tag is decreased if I add tooltip-end after initial render only on desktop with any window size
• Size of html-tag is NOT decreased if I add tooltip-end after initial render only on mobile with any window size

Did you reproduce the bug?

[uh-zuh]

I have checked Android - there is no such bug.
Hence it is iOS specific bug.

[pdanpdan]

A play reproduction: https://play.tailwindcss.com/1zuqkpkSXx?layout=preview
I would say it is a safari problem - it does not recalculate the layout.
But it works without any problem if you use responsive classes: https://play.tailwindcss.com/E4dhcoCzWU?layout=preview

• load on ios landscape so it starts with tooltip centered
• rotate to portrait

[uh-zuh]

Not just Safari but also Firefox and Chrome.
I can't use responsive classes becuase I need to use tooltip-end only if tooltip target is near right border of srcreen hence I need to use JavaScript.

[pdanpdan]

In chrome and Firefox it looks good to me. Check if you have something else that forces the overflow, because your original example repo had overflow without the tooltip

[uh-zuh]

When I answered I have checked your repro and saw exactly same bug in Firefox and Chrome as in Safari.

[pdanpdan]

On iOS? On iOS everything is safari

[uh-zuh]

I don't know internals of these browsers on iOS, I'm talking only about following apps:

• https://apps.apple.com/us/app/firefox-fast-private-browser/id989804926
• https://apps.apple.com/us/app/google-chrome/id535886823