search

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
12.03k stars 520 forks source link

interactiveBorder is not working with virtual references when offset is set. #893

Closed deevannaveed closed 3 years ago

deevannaveed commented 3 years ago

Bug description

The problem is that I am using virtual references using getReferenceClientRect and I want the tippy to have interactive border so that if I move my mouse towards the tippy popup it should stay there instead of moving, if I remove the offset its working but I need the offset with interactive border.

Reproduction

CodePen link: https://codepen.io/deevannaveed/pen/ExgMRbm

KubaJastrz commented 3 years ago

I'm not sure if I understand you fully. I get that you want your tooltip to be interactive, ie. allow the tooltip to stay in-place instead of following the mouse cursor. But you are explicitly setting the tooltip position on mousemove event.

Maybe some kind of throttling on the mousemove event could help you? Or maybe do you want the tooltip to become interactive after you stop moving the mouse cursor for X amount of time?

deevannaveed commented 3 years ago

Maybe some kind of throttling on the mousemove event could help you? Or maybe do you want the tooltip to become interactive after you stop moving the mouse cursor for X amount of time?

In the codepen example if you remove offset from the tippy we can easily move over the tippy and we can interact with the button even its following the cursor but if we add offset then we cannot move easily towards the tippy, we must move our mouse very fast towards the tippy to interact with the button.

atomiks commented 3 years ago

This is kind of just a UX problem, as @KubaJastrz said, the code you've written is making the tippy follow the mouse cursor which means it's constantly trying to avoid it, the only reason you can 'land' on it occassionally is because of the way the browser registers the mousemove events with debouncing or whatever. I thought the followCursor plugin handled this but maybe not for "free move" tippys like this one.