interactive + tooltip offset bug

[ajmerik121]

No description provided.

[mohsinulhaq]

@ajmerik121 https://codesandbox.io/s/bold-feistel-j0zxp?file=/src/index.js
I see no flickering with 0 offset and interactive true. Can you produce a minimal codesandbox by forking our basic example?

[mohsinulhaq]

okay, my bad, I misread it as 0 offset, but even with > 0 offset, I get no flickering, so I am no longer sure what you mean by flickering. Also since you have used a rather large offset of 20, you would definitely need to add some reasonable delayHide if you want users to be able to move to the tooltip in order to persist it.

Here's a recording with your Codesandbox
https://user-images.githubusercontent.com/7688231/107015929-5490ee00-67c3-11eb-8b11-77293841e5a3.mov

And here's a recording with your Codesandbox with a 250ms delayHide (average human response time).

Screen.Recording.2021-02-05.at.3.02.51.PM.mov

[czabaj]

I just play with the code and I think I found the root cause. I might be able to prepare PR and describe it all in there.

[mohsinulhaq]

@czabaj sure, feel free to do so

[czabaj]

Yes, got it!

When the tooltip overlaps the trigger and when you move the cursor over the overlapping section, your cursor points to the tooltip and the trigger receive mouseleave event and set the visibility false, but when the tooltip hides and your cursor is still on the overlaping section, the trigger receives mouseenter and sets the visibility true, but, as the tooltip emerges, the trigger receives mouseleave and so it goes ad infinitum.

The quick workaround is

• set the offset big enough so the trigger and tooltip has no overlapping section,
• usually, only the arrow overlaps, so set the pointer-events: none CSS rule on the tooltip-arrow,
• optionally, if your tooltip contains non-clickable content, set poninter-events: none rule for the whole tooltip,

To make a robust solution, we must detect mouseenter and mouseleave on the triggers bounding box, not on the element it self.

[mohsinulhaq]

@czabaj what you are describing is quite different from what @ajmerik121 is talking about.

What you just described happens when interactive is false (default) and offset is set such that the arrow overlaps the trigger. This was the reason we had put the default offset as [0, 7] in our shipped CSS, which is the first solution that you have described. (I assume you are not using our CSS for styling?)

We had also considered solutions 2 and 3 before releasing but finally went with the offset method and left pointer-events to the end-user in case they want a lower offset or are not using our CSS.

[mohsinulhaq]

@ajmerik121
what did you select your delayHide value as?
Here's mine with the same config as what you talked about. I also made the tooltip a bit bigger so that, I don't mistakenly wander around for more than 250ms, and miss entering the tooltip while swinging side to side.
https://codesandbox.io/s/determined-bouman-1srzl

Screen.Recording.2021-02-05.at.6.20.58.PM.mov

[mohsinulhaq]

Since the OP updated the description to be empty, closing this issue as resolved. Feel free to reopen if it still persists.