[BUG] Tooltip position and show status not synchronized.

[knubie]

Describe the bug
When moving from one anchor to another, sometimes the tooltip's position is updated before its visibility. This results in some glitchy / flickering behavior.

Version of Package
v5.10.6

To Reproduce

1. Set Tooltip delayShow to 300
2. Set Tooltip delayHide to 0
3. Move from one anchor to another (with no space between)
4. Observe that the tooltip first changes position and content, then hides. Then after 300ms shows again.

Expected behavior
The tooltip should hide first, then update position and content.

Screenshots
https://user-images.githubusercontent.com/431251/230918927-995f1ccf-2449-40d8-8a4b-948c48605393.mp4

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

• OS: MacOS
• Browser firefox
• Version [e.g. 22]
• Frameworks create-react-app

Additional context
Repro: https://github.com/knubie/react-tooltip-demo
Somewhat, but not really related: #1008

[gabrieljablonski]

This one will be a lot trickier to solve. The root of this problem is that the tooltip content and the tooltip position are updated independently. Since the position calculation may take more than 1 render cycle to finish, and updating the content will pretty much always take exactly 1 cycle, sometimes you'll see the text updating before the position.

We've tried to fix this by updating the content and the position on the same cycle 100% of the time, but it turned out to be not that easy.

The tooltip closing when you move from one element to another is actually a bug, since the expected behavior when using delayShow is that the tooltip will stay open for as long as you're hovering an anchor element, not close and reopen after the delay.

Here are some alternatives until we can tackle this on (it might take several days until we have the time):

1. When using delayShow, also use delayHide with a small value (50 should be fine). This will mitigate the flickering, though sometimes you'll still see the text updating before the tooltip has moved.
2. Use one tooltip for each anchor element. This is really not ideal, and we usually recommend against this, but it could work on your case if you don't have many elements (anything up to 20 tooltips on the page should be fine, maybe even more).

If you have any other ideas, please let us know.

[knubie]

The tooltip closing when you move from one element to another is actually a bug, since the expected behavior when using delayShow is that the tooltip will stay open for as long as you're hovering an anchor element, not close and reopen after the delay.

Ah okay. I was going to ask about this earlier. Solving that bug might be a good next step.

1. When using delayShow, also use delayHide with a small value (50 should be fine). This will mitigate the flickering, though sometimes you'll still see the text updating before the tooltip has moved.

This worked for me. However I noticed another issue that is kind of the opposite of the previous one: When hovering over an anchor, the tooltip's show state is updated to true first, then a frame or two later the position and content are updated. This has the effect of the tooltip showing up at it's previous position for a frame or two before moving to the correct position. However I was only able to replicate this in my own application and not the create-react-app demo.

To resolve that I simply added the transition CSS property back in so that the tooltip is opacity: 0 for the first frame or two.

Ideally all of the state change (show/position/content) should update synchronously. I don't have any concrete suggestions for you at the moment, though, as I'm not that familiar with the code base.

[github-actions]

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.

[dbidwell94]

I'm experiencing a similar issue.

reactTooltipBug.mp4

Looks like the position is not updated before the tooltip is shown

[knubie]

Also experiencing this on the latest version, even with the transition hack mentioned above. Haven't had time to dig into how or why it's happening, though.

[dbidwell94]

I've been digging, but I can't seem to find the problem yet.

[gabrieljablonski]

@dbidwell94 the original issue has to do with transitioning between two adjancent anchor elements, yours seems to be a little different. I am unable to reproduce it. If you could provide a sample repo it would help a lot.

@knubie are you experiencing the same thing? as in:

• you hover on an element to show the tooltip
• you hover out and the tooltip is hidden
• you hover on another element and the tooltip is misplaced for a few frames

Again, I haven't been able to reproduce this.

[knubie]

Just recorded a demo video from my production app. I noticed the following things:

• On mouseout the tooltip is misplaced for a few frames.
• On mouseenter the tooltip is misplaced for ~1 frame sometimes. This only happens once or twice in the video.

Here are the settings for my tooltip:

delay-show = 500
delay-hide = 50
transition: opacity 0.1s ease-out

tooltip_bug4.mp4

[dbidwell94]

@gabrieljablonski Here are the items in question:

React tooltip instance => https://github.com/Tekxchange/web_ui/blob/master/src/App.tsx#L26

Go to current location data-id => https://github.com/Tekxchange/web_ui/blob/master/src/pages/app/map/index.tsx#L86
Results bar id => https://github.com/Tekxchange/web_ui/blob/master/src/pages/app/resultsBar/index.tsx#L41

I'm not sure it's too big of a deal. While testing I have noticed it:

A) only seems to happen on Opera (might happen on Safari as well, I'm not sure)
B) only happens on that browser if you are logged in
C) Chrome and Firefox seem to be working as expected.

[gabrieljablonski]

@dbidwell94 thanks for taking the time. We'll investigate and see what we can do.