react-tooltip icon indicating copy to clipboard operation
react-tooltip copied to clipboard

[BUG] Offset + place have unexpected behavior in Safari

Open shahednasser opened this issue 11 months ago • 1 comments

Check the troubleshooting page before opening an issue!

Make sure your problem isn't already covered at the troubleshooting page: https://react-tooltip.com/docs/troubleshooting


Bug description

I'm trying to place the tooltip at a dynamic offset based on a greater parent's width, and I've set place to right.

On chromium-based browsers, it works as expected:

Screenshot 2025-01-14 at 10 09 37 AM

The tooltip has the offset starting from the right of the node, as expected.

However, on Safari, it seems when place is set, the offset is set from the starting of the node, rather than the end:

Screenshot 2025-01-14 at 10 10 27 AM

I've reached this conclusion because when I remove place, the offset is handled correctly, but from the top rather than from the right. I've also tried to use a fixed offset rather than a dynamic one, and while place is set the result is the same.

You can find the code here. You can also reproduce it live on the Medusa documentation. (Edit: this is until this PR is merged which fixes the issue with a workaround)

I was able to fix it by detecting whether the current browser is Safari and setting the offset differently in that case.

Version of Package v5.28.0

To Reproduce

Use the tooltip with offset + place set, and check it out on safari.

Expected behavior

The behavior of using offset + place should be consistent to handle it properly.

Screenshots

(Added them earlier)

Desktop (please complete the following information if possible or delete this section):

  • OS: iOS
  • Browser [e.g. chrome, safari]: Issue is on Safari
  • Version [e.g. 22]: Version 17.4.1 (19618.1.15.11.14)
  • Frameworks [e.g. React 18, Next.js 13]: React 19, Next.js 15

shahednasser avatar Jan 14 '25 08:01 shahednasser

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

github-actions[bot] avatar Jun 17 '25 12:06 github-actions[bot]