Incorrect tooltip positioning in corner cases

[belicekm]

Tooltip won't display correctly when close to top-left and top-right corner of the browser window.

How to reproduce:

• align the hoverable area to be near the top-right corner of the window
• position mouse cursor above the hoverable area
• move cursor down until it is inside of the hoverable area
• tooltip will be displayed with incorrect position

Following picture was taken from http://wwayne.com/react-tooltip/

[aronhelser]

I see - it seems to happen when the mouse enters the hoverable area from outside the window. Like the top or right in the above picture.

Any ideas on how to fix it?

[aronhelser]

@belicekm if you have a few minutes, please look at #207 - it doesn't fix the problem you've found, but this is the code that must be fixed. For some reason, it's not detecting that it should reposition the tooltip.

[aronhelser]

@hassanbot I would love it if you could take a look at this issue for a few minutes!

[gris-martin]

Hi! Sorry for being a little slow. I'll try to take a look this weekend! Although I haven't touched JavaScript in more than a year so I might be a little rusty.

[peter-schreyer-verys]

Hello gentlemen,
Has there been a fix discovered for this bug yet?
Thanks.

[smakosh]

Waiting for a fix too

[gris-martin]

Hi! Sorry for the delay, but I've finally had some time to look at this issue.

The problem is that when there is no way of orienting the tooltip to be inside of the client (e.g. in a corner), the getPosition function treats is as though it isn't close to an edge at all. This made sense before the concept of "desiredPlace" was introduced (#207), since it would then just keep its orientation the way it was before. Now, however, the position is returned to its "desired" orientation when it can't find a good orientation.

Would the desired behavior be as it was before, that the orientation remains the way it was before when a good orientation can't be found? Or maybe the tooltip should try and keep as big a part as possible inside of the client? Any opinions on this?

[aronhelser]

I'd say we want to minimize transitions, so this would argue for the previous behavior - the orientation remains the way it was if a good orientation can't be found. Is this do-able while keeping the 'desiredPlace' behavior?

…

On Sun, Jun 3, 2018 at 10:31 AM, Hassanbot ***@***.***> wrote: Hi! Sorry for the delay, but I've finally had some time to look at this issue. The problem is that when there is no way of orienting the tooltip to be inside of the client (e.g. in a corner), the getPosition function treats is as though it isn't close to an edge at all. This made sense before the concept of "desiredPlace" was introduced (#207 <#207>), since it would then just keep its orientation the way it was before. Now, however, the position is returned to its "desired" orientation when it can't find a good orientation. Would the desired behavior be as it was before, that the orientation remains the way it was before when a good orientation can't be found? Or maybe the tooltip should try and keep as big a part as possible inside of the client? Any opinions on this? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#371 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AS_pnVJ2r9dCLvGBa8LcwnKIyEmWu1ucks5t4_MkgaJpZM4S-YBX> .

[gris-martin]

I've made a pull request (#391) that solves this issue, and cleans up the relevant code :) With it the tooltip keeps its orientation unless it can find a better one (described a little more in depth in the PR).

[aronhelser]

🎉 This issue has been resolved in version 3.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀