mohsinulhaq/react-popper-tooltip

followCursor tooltip - reposition if you mouse over tooltip

penx opened this issue · 8 comments

penx commented

Describe the bug
In followCursor mode, the tooltip doesn't reposition if you move the mouse over the tooltip

To Reproduce
Steps to reproduce the behavior:

  1. Go to the follow cursor demo https://react-popper-tooltip.netlify.com/#follow-cursor
  2. Mouse over to see tooltip
  3. Quickly move the mouse over the tooltip
  4. Tooltip doesn't reposition

Expected behavior
react-popper-tooltip should ensure tooltip doesn't sit underneath cursor when in followCursor mode.

Screenshots

follow-cursor

Desktop (please complete the following information):

  • OS: Mac OS X
  • Browser: Chrome
  • Version: 83.0.4086.0
mohsinulhaq commented

this is the intended behaviour, as it's tracking mouse position within the bounds of the trigger and not the tooltip or anything else

penx commented

This is "within the bounds of the trigger" but the tooltip is overlayed on top of these bounds. If the tooltip was repositioned instantly then you would never see this issue as you wouldn't be able to mouse over it. The issue happens when you quickly move the mouse over the tooltip before it has a chance to reposition.

I accept this may be hard to solve due to the inner workings of what's happening, but I'd question whether this is intended behaviour.

  • 👍2
penx commented

followCursor

mohsinulhaq commented

oh got it, yes the positioning happens asynchronously, so your situation can occur. Right now I don't have the bandwidth to look into it. Feel free to raise a PR. Otherwise I'll give it a look this weekend.

  • 👍1
denisborovikov commented

I believe, if you add pointer-events: none to the .tooltip-container it should resolve this issue.

  • 👍1
  • 👀1
penx commented

Yep that works for me, thanks! Happy for this issue to be closed, unless you think it needs to be solved in the lib or added to the docs.

  • 🎉1
penx commented

on second thoughts, if it's easy enough to add pointer-events: none, but only when followCursor is true, then probably a good idea to do this in react-popper-tooltip so others don't get unexpected jankiness

mohsinulhaq commented

@penx the library doesn't and shouldn't come with inherent CSS, just event handlers, CSS is kept to the user to add. Hence I'm closing the issue.