Bad tooltip display (wrong location and size) when embedded in Wordpress

[pierre-haessig]

I've embedded interactive Altair/Vega-Lite charts in a Wordpress page: https://pierreh.eu/a-decade-of-office-notebook-processors/. It mostly works fine (the embedding method is mostly the classical Vega-Embed README, with Wordpress specific bits described in https://pierreh.eu/vega-lite-wordpress/)

However, the display of the tooltip, which is a multiline one breaks:

• The location and size is wrong (huge blank rectangle).
• not 100% of the time though, sometimes it works

For the comparison, I've embedded the same json chart specifications in a blank page: https://pierre-haessig.github.io/notebook-cpu-performance/Geekbench%206%20plots/CPUs_bydate.html

See screenshots in the discussion vega/vega-lite#9608

[vrbajaroslav]

The same happens with Vega-Lite chart extension to Airtable

[pierre-haessig]

So I'm not the only one!

It would be good to have a starting as as to where to start the diagnosis of the problem. I've only found the dom element which contains the tooltip, but haven't found the code which is responsible for its size and position computation. It is the <div> added just before the closing </body> tag.

<div id="vg-tooltip-element" class="vg-tooltip" style="top: 222.85px; left: -55421px;">

It seems that its inline style is changed dynamically. Adding a breakpoint on attribute change does work, but leads to the minified source code.

[pierre-haessig]

I wonder if this behavior may relate to the latest code change #959. However, I don't have an older version to see if it worked before.

[vrbajaroslav]

The same happens with Vega-Lite chart extension to Airtable

Now it works again :)

[pierre-haessig]

Now it works again :)

Hello, do you mean that there was a code change to make it work again?