saadeghi
bug: gap in tooltip arrow
What version of daisyUI are you using?
2.51.6
Describe your issue
I just noticed an issue I didn't notice before, so this might be a regression: there is a gap between the tooltip bubble and its arrow.
The screenshot above was taken from Chrome 113.0.5672.127 on Windows 10.
What browsers are you seeing the problem on?
Chrome
Reproduction URL (optional)
https://daisyui.com/components/tooltip/
I don't see this issue on Chrome
- Are you experiencing the same issue on Chrome's incognito mode as well?
- Do you see the issue here as well? https://play.tailwindcss.com/S7kXTOx0TG
- Are you using any browser extension or software that may change CSS styles of web pages?
- Can you test this on other browsers or on mobile?
@saadeghi I think I found the root cause: the default screen settings in Windows 10 for my laptop was set to 125% scale:
Firefox shows the same gap on my laptop, so it might be the way Windows (or my laptop's Nvidia graphics card) is rendering the CSS at 125% scale. The issue went away after changing the scale factor to 100%.
Thanks for additional info.
Currently the arrow is using px values (unlike other styles which are using rem) and that is why it's not adapting the default zoom. I will fix this soon.
Hopefully you'll find a way to make it work because I just tried rem unit and still see the gap:
Note that the gap is only visible for top/bottom placements -- left/right look fine even at 125% scale.
@saadeghi, I was checking the docs and noticed that the gap is still there. Not only on top and bottom, but on the left side as well but not on the right side.
I'm using MS Edge on windows 11 with AMD built-in graphic card and display scaled to 125%.
Scaling to 100% fixes the issue but everything is barely interactable. Scaling to 150% fixes the issue with the left tooltip. Scaling to 175% fixes the issue with the top tooltip but the arrow in the left tooltip becomes small.
