Tip with followCursor option appears wrong on svg lines #135

tgotwig · 2017-12-05T14:42:16Z

Sometimes it appears wrong (with followCursor option) on svg lines:

atomiks · 2017-12-05T15:16:29Z

Can you make a CodePen?

tgotwig · 2017-12-05T15:28:02Z

Sometimes it appears below, like in the image above:
https://codepen.io/tgotwig/pen/wPZJBa

atomiks · 2017-12-05T15:59:44Z

Set flip: false in the tippy options.

tgotwig · 2017-12-05T16:12:41Z

If I set flip to false,
then it appears sometimes on top instead of below,
but not exactly on cursor position.

atomiks · 2017-12-05T16:16:15Z

There is overflow prevention when the tooltip hits the edges of the viewport, is that what you mean?

tgotwig · 2017-12-05T16:21:28Z

The tooltip should be always on curser position, but isn't:

atomiks · 2017-12-05T16:26:03Z

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

tgotwig · 2017-12-05T16:47:17Z

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 · 2017-12-05T17:10:20Z

I think this is an implementation failure,
because I used bootstrap tooltips in the past and there it works without this issue.

atomiks · 2017-12-05T17:15:32Z

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.

tgotwig · 2017-12-05T17:21:42Z

It also fails on beta-2.

atomiks · 2017-12-05T17:24:47Z

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...

tgotwig · 2017-12-05T17:31:28Z

Maybe someone other can,
I just wanted to alert about this issue 😅

atomiks · 2017-12-05T17:34:37Z

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!

tgotwig · 2017-12-05T17:55:10Z

Don't know how to inspect tooltips with the browser tools 🤔

atomiks · 2017-12-05T17:58:37Z

Use a click trigger, and scroll down to the bottom of the Elements tab (end of <body>) and you'll find the node there.

tgotwig · 2017-12-05T18:09:46Z

What is the selector name of an tooltip? 🤔
print the whole document is too large for codepen

atomiks · 2017-12-05T18:16:17Z

.tippy-popper

On Codepen it's within the iframe

tgotwig · 2017-12-05T18:25:11Z

translate3d has always the same values when the issue occurs

atomiks · 2017-12-09T16:52:53Z

v2.0.3 fixes OP

@tgotwig can you make a new issue about the arrow problem? Thank you!

atomiks added the 🐛 bug label Dec 6, 2017

atomiks closed this as completed Dec 9, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tip with followCursor option appears wrong on svg lines #135

Tip with followCursor option appears wrong on svg lines #135

tgotwig commented Dec 5, 2017 •

edited

Loading

atomiks commented Dec 5, 2017

tgotwig commented Dec 5, 2017 •

edited

Loading

atomiks commented Dec 5, 2017

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017 •

edited

Loading

tgotwig commented Dec 5, 2017

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017 •

edited

Loading

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017 •

edited

Loading

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017 •

edited

Loading

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017

tgotwig commented Dec 5, 2017 •

edited

Loading

atomiks commented Dec 9, 2017

Tip with followCursor option appears wrong on svg lines #135

Tip with followCursor option appears wrong on svg lines #135

Comments

tgotwig commented Dec 5, 2017 • edited Loading

atomiks commented Dec 5, 2017

tgotwig commented Dec 5, 2017 • edited Loading

atomiks commented Dec 5, 2017

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017 • edited Loading

tgotwig commented Dec 5, 2017

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017 • edited Loading

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017 • edited Loading

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017 • edited Loading

tgotwig commented Dec 5, 2017

atomiks commented Dec 5, 2017

tgotwig commented Dec 5, 2017 • edited Loading

atomiks commented Dec 9, 2017

tgotwig commented Dec 5, 2017 •

edited

Loading

tgotwig commented Dec 5, 2017 •

edited

Loading

atomiks commented Dec 5, 2017 •

edited

Loading

atomiks commented Dec 5, 2017 •

edited

Loading

atomiks commented Dec 5, 2017 •

edited

Loading

atomiks commented Dec 5, 2017 •

edited

Loading

tgotwig commented Dec 5, 2017 •

edited

Loading