Tooltip doesn't support "image" key

[ehknight]

My understanding is that to render tooltips, Altair uses the vega-tooltip plugin. Per that project's README, one awesome feature that library has is the ability to render images as part of the tooltip with the image key. From the docs:

Supports special keys title (becomes the title of the tooltip) and image (used as the url for an embedded image)

Using the tooltip without the image key is fine:

mydata = pd.DataFrame.from_records([{'a': 1, 'b': 1}, {'a': 2, 'b': 2}])
chart = alt.Chart(mydata).mark_circle().encode(
    x='a',
    y='b',
    tooltip=alt.Tooltip(['a'], title='My Cool Tooltip')
).interactive()

display(chart)

However, when I add the image key, it stops working:

chart = alt.Chart(mydata).mark_circle().encode(
    x='a',
    y='b',
    tooltip=alt.Tooltip(['a'], title='My Cool Tooltip', image='https://picsum.photos/200')
).interactive()

display(chart)

SchemaValidationError: Invalid specification

        altair.vegalite.v4.schema.channels.Tooltip, validating 'additionalProperties'

        Additional properties are not allowed ('image' was unexpected)

Maybe this feature is already supported but the schema is out of date? Thanks.

---

Please follow these steps to make it more efficient to solve your issue:

• [N/A] Since Altair is a Python wrapper around the Vega-Lite visualization grammar, most bugs should be reported directly to Vega-Lite. You can click the Action Button of your Altair chart and "Open in Vega Editor" to create a reproducible Vega-Lite example and see if you get the same error in the Vega Editor.
• Search for duplicate issues.
• Use the latest version of Altair.
• Describe how to reproduce the bug and include the full code and data to reproduce it, ideally using a sample data set from vega_datasets.

[jakevdp]

I don't think Vega-Lite supports that feature of vega-tooltip, and so Altair cannot support it either. I'd suggest reporting the issue in the Vega-Lite repository.

[joelostblom]

I just discovered that it is possible to show rendered images in altair/vega-lite tooltips like this:

import altair as alt
import pandas as pd

source = pd.DataFrame.from_records(
    [{'a': 1, 'b': 1, 'image': 'https://altair-viz.github.io/_static/altair-logo-light.png'},
     {'a': 2, 'b': 2, 'image': 'https://avatars.githubusercontent.com/u/11796929?s=200&v=4'}]
)
alt.Chart(source).mark_circle(size=200).encode(
    x='a',
    y='b',
    tooltip=['image']  # Must be a list for the image to render
)

I added a PR with this example in #2519

[joelostblom]

Sorry I missed that this was specifically about using the image key inside alt.Tooltip, which is not yet supported in altair although images can still be displayed as in the sample above.

Although if we look at the example given for how to use the tooltips in Vega-Lite vega/vega-lite#7635 (comment), it is similar to what I have used above, so I am not sure if the 'image' key will be exposed directly in vega-lite or if this is the recommended approach to show images. @ehknight Could you confirm whether this can be closed or there is still a use case that you think is not covered?

[jakevdp]

(Followup in case it helps anyone: to render this requires the frontend to load vega version 5.21.0 or newer)

[joelostblom]

Sorry I missed that this was specifically about using the image key inside alt.Tooltip, which is not yet supported in altair although images can still be displayed as in the sample above.

Reading my own comment again, the example we added cover the "image" key mechanism mentioned by the OP so once #2570 is merged with that clarification, then this can be closed. I also PRed it to the VL docs vega/vega-lite#8048

[jparkhilltx]

Yeah. This really had me going for a while. Altair could benefit from the same documentation.