Question: Xy tooltip x-position offset

[albadedan]

Hi, I just came across this library yesterday and it is pretty dang good! Thank you.

I have implemented an Xy graph inside a menu in my application, but I have found that in that scenario, the mouseover tooltip consistently appears in the wrong place, and I have not found any method to adjust its position.

In the below screenshot, the highlighted area on the graph is where the mouse pointer is, but the tooltip is consistently that far away on the right. (as in, it moves with the mouse as expected, but is always that far away from where it should be.)

If I enter full screen mode, or if place the graph on the page directly, the tooltip behaves appropriately.

Any ideas?

[graphieros]

Hey @albadedan thanks:)
Could you share the css of the wrapper where you placed the chart so I can reproduce ?

[albadedan]

So I'm using the Vuetify framework for the UI, and I've not made any style modifications to these components.

I have been playing around in the source and I have found that the v-overlay__content that comes from the v-menu component from Vuetify has the following style:

style="position: fixed; top: 64px; left: 625px; --v-overlay-anchor-origin: bottom right; transform-origin: right top; min-width: 48px; max-width: 1879px; max-height: 887px;"

I have found that if I modify the value for left to be 0px, then the mouse position and the tooltip line up again, but of course that left position is dynamic and is determining where my menu is supposed to be rendering.

I don't know if this is relevant, but recently I was implementing a right-click menu and I found (having never done that before) that I needed to use the pageX,Y values from the mouseevent rather than the x,y or clientX,Y values - Just a thought.

[graphieros]

Thanks for the details, I can now reproduce.
The issue persists with both pageX,Y or clientX,Y.

While I figure it out, you can probably do without the tooltip for your use case, since you display the legend and dataLabels on hover already.

I'll keep you posted.

[graphieros]

Ok, turns out the built-in Teleport Vue component can be used to solve this, to place the tooltip on the body, and on the parent when in fullscreen.

Some minor changes need to be applied on all components bearing tooltips, and I also have another update to finish after that. Expect a release in less than 2 days.

[albadedan]

Amazing, thank you.

[graphieros]

@albadedan
You can upgrade to v2.4.42 or v2.4.43

Let me know how it goes:)

[albadedan]

That was a quick 2 days! Thank you.

I've just tested it, and it is working as expected now. The only thing I had to do was add a higher z-index to the vue-data-ui-tooltip class. But I think that's probably reasonable, to require users to do that, as it will be different for everybody's individual use case.

[graphieros]

@albadedan

Awesome:)
Yes, I noticed a z-index might be required on this class in some cases.
I'll add this info somewhere in the docs.