Tooltip window positioned incorrectly when zoomed

Question

Tooltip window positioned incorrectly when zoomed

Opened this issue 6 years ago · 10 comments

When zooming into a visualization in Safari 12.0.2 on macOS 10.14.2, the tooltip window is not displayed at the mouse cursor location. If zoomed in enough, the tooltip window does not appear at all (probably because it is "off-screen"). This happens with both the SVG and Canvas renderers.

Answer 1 · 2019-01-01T19:08:52.000Z

Can you check where the positions are coming from? This may be a Vega issue.

Answer 2 · 2019-01-01T22:08:12.000Z

I don't see this issue in Chrome.

Answer 3 · 2019-01-01T23:46:16.000Z

I don't see it on Chrome either, nor on Firefox (although FF doesn't have pinch-zoom anyway).

Answer 4 · 2019-01-02T00:46:03.000Z

The problem isn't due to zooming, it is due to scrolling: tooltip positions are correct when zoomed if the scroll position at the upper-leftmost corner. As the document is scrolled, the tooltips start to drift off from the correct location.

It looks like the position is being calculated by https://github.com/vega/vega-tooltip/blob/master/src/position.ts Apparently, event.clientX property in Safari is in page coordinates but in other browsers it is in window coordinates. If I change position.ts to use pageX/pageY instead of clientX/clientY, then it works for me in Safari when zooming, and it continues to work correctly in Chrome and Firefox on macOS (I don't have IE, so I can't test there).

Answer 5 · 2019-01-02T16:57:58.000Z

Hmm, that seems to be incorrect when I scroll. See http://localhost:3000/vega-examples.html for example.

Answer 6 · 2019-01-02T17:01:13.000Z

domoritz commented 6 years ago

Answer 7 · 2019-01-02T19:33:43.000Z

Is that in Chrome or Safari? It would be a shame if we had to check the user-agent and use different logic for the different browsers.

Answer 8 · 2019-01-03T02:47:32.000Z

This is in chrome.

Answer 9 · 2020-08-18T22:38:20.000Z

I'm having a similar issue when used with a vega chart in a scrollable div. The tooltip shows up in the correct place but is referencing the wrong data item. This tooltip is with the cursor over the top most bar. The date should be August 17th.

Answer 10 · 2021-07-07T15:13:38.000Z

I had a similar problem with a vega inside a container with transform: scale(xxx) style. Exploring the call stack, I may have identified a lag between the "inner" coordinates (the one of the scenes, affected by the transform) and the "outer" coordinates (the ones of the canvas mouseover event, related to the client) here.
Switching to the svg render resolved the issue, since the event targets are directly computed by the browser.