Repository: vega/altair

Issue:
Tooltip doesn't support "image" key
My understanding is that to render tooltips, Altair uses the `vega-tooltip` plugin. Per that project's [README](https://github.com/vega/vega-tooltip), 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](https://github.com/vega/vega-lite/issues). 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.
- [x] Search for duplicate issues.
- [x] Use the latest version of Altair.
- [x] 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`.



Discussion:
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.
I just discovered that it is possible to show rendered images in altair/vega-lite tooltips like this:

```py

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 https://github.com/altair-viz/altair/pull/2519
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 https://github.com/vega/vega-lite/issues/7635#issuecomment-925892820, 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?
(Followup in case it helps anyone: to render this requires the frontend to load vega version 5.21.0 or newer)

Resolving patch:
diff --git a/altair/examples/image_tooltip.py b/altair/examples/image_tooltip.py
--- a/altair/examples/image_tooltip.py
+++ b/altair/examples/image_tooltip.py
@@ -3,7 +3,9 @@
 -------------
 This example shows how to render images in tooltips.
 Either URLs or local file paths can be used to reference
-the images.
+the images. To render the image, you must use the special
+column name "image" in your data and pass it as a list to
+the tooltip encoding.
 """
 # category: other charts
 
@@ -17,5 +19,5 @@
 alt.Chart(source).mark_circle(size=200).encode(
     x='a',
     y='b',
-    tooltip=['image']  # Must be a list for the image to render
+    tooltip=['image']  # Must be a list containing a field called "image"
 )


Test patch: