Erratic tooltip display (Vega-embed in Wordpress)

[pierre-haessig]

Hello,
I've embedded Vega charts in a Wordpress blog: https://pierreh.eu/a-decade-of-office-notebook-processors/ and I've got issues with the display of the tooltips, see screenshot below. This behavior is erratic in the sense that sometimes is displays fine. There was no such issue when creating the spec with Altair in JupyterLab (notebook https://github.com/pierre-haessig/notebook-cpu-performance/blob/main/CPUs_plot.ipynb). And here is the resulting spec: https://raw.githubusercontent.com/pierre-haessig/notebook-cpu-performance/refs/heads/main/Geekbench%206%20plots/CPUs_bydate_linear_withreg.json (a bit large, sorry).

As a summary, here is the Python code that creates the chart. Notice in particular that the tooltip is multiline (created with a list of values)

highlight = alt.selection_point(name="highlight", on="pointerover", empty=False)

color_designer = alt.when(highlight, empty=True).then(
        alt.Color('Designer:N').scale(scheme='set1') # nice scheme: Intel=blue, AMD=red
    ).otherwise(
        alt.value('lightgray')
    )

order = alt.when(highlight).then(alt.value(1)).otherwise(alt.value(0)) # move upfront highlighted items

chart_date = alt.Chart(cpus).mark_point(size=150, filled=True, strokeWidth=5).encode(
    y='Launch date',
    color=color_designer,
    shape='Designer', # reenforce color
    order=order,
    tooltip=['Name', 'Architecture', 'Cores', 'Launch date', 'Win11', 'GB6 Single', 'GB6 Multi'],
).add_params(
    highlight
)

chart_dsingle = chart_date.encode(
    x='GB6 Single',
).properties(
    title='Single-Core Performance'
)
chart_dmulti = chart_date.encode(
    x='GB6 Multi',
    y=alt.Y('Launch date', axis=alt.Axis(labels=False, title='')) # hide y tick labels
).properties(
    title='Multi-Core Performance'
)

(chart_dsingle | chart_dmulti)

I've embedded the graphs using Vega-Embed as described https://pierreh.eu/vega-lite-wordpress/ (but on this example chart, there is no tooltip...). It's my first attempt to embed Vega in Wordpress, and I didn't find many sources on this. I'll be glad if you have ideas on how to diagnose this.

Perhaps a bad interaction with Wordpress CSS?

[pierre-haessig]

It's probably a bad interaction with the rest of the Wordpress page. Indeed, I've created a raw page with the Vega-embed code which loads the same json chart specs, and it works nicely: https://pierre-haessig.github.io/notebook-cpu-performance/Geekbench%206%20plots/CPUs_bydate.html