diff --git a/examples/compiled/text_tooltip_image.png b/examples/compiled/text_tooltip_image.png deleted file mode 100644 index 6899736a6dc..00000000000 Binary files a/examples/compiled/text_tooltip_image.png and /dev/null differ diff --git a/examples/compiled/text_tooltip_image.svg b/examples/compiled/text_tooltip_image.svg deleted file mode 100644 index 2b0a6c1059b..00000000000 --- a/examples/compiled/text_tooltip_image.svg +++ /dev/null @@ -1 +0,0 @@ -data/ffox.pngdata/gimp.pngdata/7zip.png \ No newline at end of file diff --git a/examples/compiled/text_tooltip_image.vg.json b/examples/compiled/text_tooltip_image.vg.json deleted file mode 100644 index dc2bdf82655..00000000000 --- a/examples/compiled/text_tooltip_image.vg.json +++ /dev/null @@ -1,61 +0,0 @@ -{ - "$schema": "https://vega.github.io/schema/vega/v5.json", - "description": "A simple chart with an image tooltip.", - "background": "white", - "padding": 5, - "width": 20, - "style": "cell", - "encode": {"update": {"stroke": {"value": null}}}, - "data": [ - { - "name": "source_0", - "values": [ - {"image": "data/ffox.png"}, - {"image": "data/gimp.png"}, - {"image": "data/7zip.png"} - ] - } - ], - "signals": [ - {"name": "y_step", "value": 20}, - { - "name": "height", - "update": "bandspace(domain('y').length, 1, 0.5) * y_step" - } - ], - "marks": [ - { - "name": "marks", - "type": "text", - "style": ["text"], - "from": {"data": "source_0"}, - "encode": { - "update": { - "fill": {"value": "black"}, - "tooltip": { - "signal": "{\"image\": isValid(datum[\"image\"]) ? datum[\"image\"] : \"\"+datum[\"image\"]}" - }, - "description": { - "signal": "\"image: \" + (isValid(datum[\"image\"]) ? datum[\"image\"] : \"\"+datum[\"image\"])" - }, - "x": {"signal": "width", "mult": 0.5}, - "y": {"scale": "y", "field": "image"}, - "text": { - "signal": "isValid(datum[\"image\"]) ? datum[\"image\"] : \"\"+datum[\"image\"]" - }, - "align": {"value": "center"}, - "baseline": {"value": "middle"} - } - } - } - ], - "scales": [ - { - "name": "y", - "type": "point", - "domain": {"data": "source_0", "field": "image", "sort": true}, - "range": {"step": {"signal": "y_step"}}, - "padding": 0.5 - } - ] -} diff --git a/examples/specs/text_tooltip_image.vl.json b/examples/specs/text_tooltip_image.vl.json deleted file mode 100644 index 8cc8d163a0a..00000000000 --- a/examples/specs/text_tooltip_image.vl.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "$schema": "https://vega.github.io/schema/vega-lite/v5.json", - "view": {"stroke": null}, - "description": "A simple chart with an image tooltip.", - "data": { - "values": [ - {"image": "data/ffox.png"}, - {"image": "data/gimp.png"}, - {"image": "data/7zip.png"} - ] - }, - "mark": "text", - "encoding": { - "text": {"field": "image"}, - "y": {"field": "image", "axis": null}, - "tooltip": [{"field": "image"}] - } -} diff --git a/site/_includes/docs_toc.md b/site/_includes/docs_toc.md index cadca5682be..2ee43f932b2 100644 --- a/site/_includes/docs_toc.md +++ b/site/_includes/docs_toc.md @@ -374,6 +374,5 @@ - [Tooltip Based on Encoding]({{site.baseurl}}/docs/tooltip.html#encoding) - [Tooltip Based on Underlying Data Point]({{site.baseurl}}/docs/tooltip.html#data) - [Tooltip channel]({{site.baseurl}}/docs/tooltip.html#channel) - - [Tooltip image]({{site.baseurl}}/docs/tooltip.html#tooltip-image) - [Disable tooltips]({{site.baseurl}}/docs/tooltip.html#disable-tooltips) - [Vega Tooltip plugin]({{site.baseurl}}/docs/tooltip.html#plugin) diff --git a/site/docs/tooltip.md b/site/docs/tooltip.md index 56ea9a255a1..8be56a8f4f3 100644 --- a/site/docs/tooltip.md +++ b/site/docs/tooltip.md @@ -64,14 +64,6 @@ To avoid that the tooltips groups the data, add an aggregate to the tooltip enco
-## Tooltip image - -To display an image in a tooltip you can use the [Vega Tooltip plugin](#plugin). Vega Tooltip requires the special field name `image` to indicate that the field values should be rendered as images instead of displayed as text. The image tooltip can be specified either by setting the `tooltip` property of the mark definition (as detailed above) or by passing the field _as an array_ to the tooltip encoding channel, as in the example below: - -
- -In addition to providing the path to an image, the Vega Tooltip plugin can also render base64 encoded images prefixed with `data:image/png;base64,` [similarly to how these are rendered inside HTML image tags](https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html). To change the maximum size of the rendered tooltip images, you can adjust the `max-width` and `max-height` properties of the CSS selector `#vg-tooltip-element img`. - ## Disable tooltips To disable tooltips for a particular single view specification, you can set the `"tooltip"` property of a mark definition block to `null`.