Vega-tooltip image support

Please:

• Check for duplicate issues. Please file separate requests as separate issues.

I could find any duplicate issues

• Describe how to reproduce the bug.

(x-post from Altair issue here: https://github.com/altair-viz/altair/issues/2474)

My understanding is that to render tooltips, Vega-Lite and 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)

However, this does not seem to be supported in Altair, because it is does not seem to be added yet to Vega-Lite. This would be a very useful feature to support.

• Use the latest versions of Vega and Vega-Lite.
• Provide an minimal, reproducible example spec in JSON, wrapped by triple backticks like this:

Works:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 400
    }
  },
  "data": {
    "name": "data-724890d4e94cac4976cbd99ef3589be4"
  },
  "datasets": {
    "data-724890d4e94cac4976cbd99ef3589be4": [
      {
        "a": 1.0,
        "b": 1.0
      }
    ]
  },
  "encoding": {
    "tooltip": [
      {
        "field": "a",
        "title": "My Cool Tooltip",
        "type": "quantitative"
      }
    ],
    "x": {
      "field": "a",
      "type": "quantitative"
    },
    "y": {
      "field": "b",
      "type": "quantitative"
    }
  },
  "mark": "circle",
  "selection": {
    "selector003": {
      "bind": "scales",
      "encodings": [
        "x",
        "y"
      ],
      "type": "interval"
    }
  }
}

Does not work:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 400
    }
  },
  "data": {
    "name": "data-724890d4e94cac4976cbd99ef3589be4"
  },
  "datasets": {
    "data-724890d4e94cac4976cbd99ef3589be4": [
      {
        "a": 1.0,
        "b": 1.0
      }
    ]
  },
  "encoding": {
    "tooltip": [
      {
        "field": "a",
        "title": "My Cool Tooltip",
        "type": "quantitative",
        "image": "https://picsum.photos/200/300.jpg"
      }
    ],
    "x": {
      "field": "a",
      "type": "quantitative"
    },
    "y": {
      "field": "b",
      "type": "quantitative"
    }
  },
  "mark": "circle",
  "selection": {
    "selector003": {
      "bind": "scales",
      "encodings": [
        "x",
        "y"
      ],
      "type": "interval"
    }
  }
}

• If applicable, include error messages and screenshots, GIF videos (e.g. using https://www.cockos.com/licecap/), or working examples (e.g. by clicking share in the Vega-Editor or https://bit.ly/vega-lite-blocks)

[domoritz]

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
        {"image": "data/ffox.png"},
        {"image": "data/gimp.png"},
        {"image": "data/7zip.png"}
      ]
  },
  "mark": {"type": "text", "tooltip": true},
  "encoding": {
    "text": {"field": "image"},
    "y": {"field": "image", "axis": null}
  }
}

Open the Chart in the Vega Editor

[ehknight]

Thanks for looking into this @domoritz. In the meantime, are there any possible workarounds? Thanks.