Tippyjs: Tip with followCursor option appears wrong on svg lines
Sometimes it appears wrong (with followCursor option) on svg lines:
TGotwig
All 20 comments
Can you make a CodePen?
atomiks
on 5 Dec 2017
Sometimes it appears below, like in the image above:
https://codepen.io/tgotwig/pen/wPZJBa
TGotwig
on 5 Dec 2017
Set flip: false in the tippy options.
atomiks
on 5 Dec 2017
If I set flip to false,
then it appears sometimes on top instead of below,
but not exactly on cursor position.
TGotwig
on 5 Dec 2017
There is overflow prevention when the tooltip hits the edges of the viewport, is that what you mean?
atomiks
on 5 Dec 2017
The tooltip should be always on curser position, but isn't:
TGotwig
on 5 Dec 2017
It's following the cursor perfectly on my end
https://gfycat.com/gifs/detail/PoliteFrequentLacewing
(Chrome 62, macOS 10.13)
EDIT: Maybe you are talking about when it's triggered by focus? In that case, it won't follow the cursor because it's assumed the user is tabbing to it and not using their mouse
atomiks
on 5 Dec 2017
Here you can see it (on firefox 58.0b8 (64-Bit)):
https://www.dropbox.com/s/aiym3m9ynsdrew7/Ashampoo_Snap_2017.12.05_17h41m09s_001_.wmv?dl=0
TGotwig
on 5 Dec 2017
I think this is an implementation failure,
because I used bootstrap tooltips in the past and there it works without this issue.
TGotwig
on 5 Dec 2017
That's quite strange..
Can you check if this problem exists in 2.0.0-beta.2? There is a particular line that I think _might_ be causing it.
atomiks
on 5 Dec 2017
It also fails on beta-2.
TGotwig
on 5 Dec 2017
How about the last of v1, v1.4.2? All those options except flip: false will work.
If not, go to the dist file of tippy.js and add console.log(e) to the function inside createFollowCursorListener(), and check the pageX, pageY coordinates when it happens. Perhaps the mouse event is not firing off the correct coordinates or something...
atomiks
on 5 Dec 2017
Maybe someone other can,
I just wanted to alert about this issue 馃槄
TGotwig
on 5 Dec 2017
Hmm.. looking at your gif again, it seems that the show() is triggered, but not any mousemove, so the tooltip ends up being shown at its default position. Perhaps depending on the browser/OS/device, this can become an issue.
I believe a solution would be to also update the position on show, even without a mousemove event needing to fire off.
Also I noticed that the arrow/caret has a small white gap between itself and the tooltip. Have you fiddled with the CSS to see why? I've never seen that issue either!
atomiks
on 5 Dec 2017
Don't know how to inspect tooltips with the browser tools 馃
TGotwig
on 5 Dec 2017
Use a click trigger, and scroll down to the bottom of the Elements tab (end of <body>) and you'll find the node there.
atomiks
on 5 Dec 2017
What is the selector name of an tooltip? 馃
print the whole document is too large for codepen
TGotwig
on 5 Dec 2017
.tippy-popper
On Codepen it's within the iframe
atomiks
on 5 Dec 2017
translate3d has always the same values when the issue occurs
TGotwig
on 5 Dec 2017
v2.0.3 fixes OP
@TGotwig can you make a new issue about the arrow problem? Thank you!
atomiks
on 9 Dec 2017
Related issues
Kearsan
路
3Comments
patrickhlauke
路
3Comments
dpatra
路
4Comments
khanamiryan
路
5Comments
Neill83
路
3Comments