mouseover selector not working, affecting examples such as Multi-Line Tooltip / Highlight

[schlafel]

Problem statement

I noticed that with probably recent versions of browsers that Multi-Line-Highlights/Tooltips are not displayed anymore in html.

This is also the case for the example page of the module:
Multi-Line Highlight on documentation page.

If you open the graph in the vega editor, it works as expected:

Am I the only one facing this problem?

I was facing the same issue, when i was opening old file (that has worked before)

Steps to reproduce:

• Copy code from Multi-Line Highlight on documentation page. and
• Run it with Altair v5.1.2

[schlafel]

It seems as it is primarily an issue in the documentation.
The highlights/tootips appear when using the
on="mousemove" parameter rather than on="mouseover"

Pull Request 3257

[mattijn]

Thanks for raising @schlafel, I was about to say that I cannot reproduce the issue you are describing, but that was in safari. When trying the multiline-tooltip and multiline-highlight example in google chrome I can indeed reproduce the issue you are describing. I personally do not think we should change the predicate to mousemove since mouseover should just be supported in chrome (link). Maybe others can chime in with advice.

[schlafel]

I agree that mouseover is more precise in this context. But since it was not working for Google Chrome as well as Microsoft Edge i had to come up with another solution....

But would be indeed interesting to have more details regarding this issue why it is currently not working in Chrome/Edge...

[mattijn]

I understand your situation, since it is functioning correctly within the vega-editor using the latest VL-version it is probably best that we upgrade Altair as well to the latest version of Vega-Lite.

[jbloom]

I am also having this issue, and for me it fails in both Chrome and Safari browsers. This also affects lots of similar plots I was making that worked until very recently.

I'm not sure what changed, but these plots worked for me no later than a week ago.

[mattijn]

A few hours ago this issue was raised at the Vega repository, vega/vega#3825.
Currently Altair is loading the latest Vega v5 version, in this case v5.26. It seems that that is the root of the cause..

[jheer]

Is it possible to instruct Altair which Vega version to load? If so, pegging the version to 5.25 might be a useful fix until a patched version of Vega is released.

[mattijn]

Since the described behaviour only affects the canvas rendering (default in altair) it is for the time being probably better to render as svg using alt.renderers.set_embed_options(renderer='svg')

Example spec:

import altair as alt
from vega_datasets import data

source = data.cars()
nearest = alt.selection_point(on='mouseover', empty=False)

chart = alt.Chart(source).mark_circle(size=60).encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
    opacity=alt.condition(nearest, alt.value(1), alt.value(0.1)),
    size=alt.condition(nearest, alt.value(250), alt.value(50)),    
).add_params(nearest)

# option 1
# force the renderer to use `svg` over `canvas` (default)
alt.renderers.set_embed_options(renderer='svg')
chart

Manually defining version 5.25 of Vega within Altair is not as easy as one might think. Since it depends on behaviour in the python kernel and on browser caching mechanisms.

---

Unsuccessful attempt to force Vega version 5.25:

One could/should be able to do it as such, but I was not able successful rendering it:

# reset to `canvas` if option 1 is tried first
alt.renderers.set_embed_options(renderer='canvas')

# option 2
# caution, this only works if other vega versions are not cached in the browser (very likely)
# create a custom HTMLRenderer with manual defined versions
custom_html_renderer = alt.display.HTMLRenderer(
    mode="vega-lite",
    template="universal",
    vega_version="5.25",  # default is alt.VEGA_VERSION, which currently is "5"
    vegaembed_version=alt.VEGAEMBED_VERSION,
    vegalite_version=alt.VEGALITE_VERSION,
)

# register the custom html renderer and enable it
alt.renderers.register('custom_html_renderer', custom_html_renderer)
alt.renderers.enable('custom_html_renderer')

chart  # no success

[jheer]

FYI I have a fix underway (vega/vega#3826) that I hope to merge and release soon.

[jheer]

Update: I just released Vega v5.26.1 with a fix.

[mattijn]

Thanks for the quick fix @jheer! You saved the Internet!
Thanks for raising the issue @schlafel! If it is right the newest Vega version is automatically loaded, if it is not the case and if it is urgent you might need to empty your browser cache.