Tooltip

Edit this page

Tooltips can provide details of a particular data point on demand. Tooltips for each single-view in Vega-Lite can be (1) generated based on the encoding, (2) generated based on the underlying data point, or (3) directly specified via the tooltip channel.

By default, the renderer will generate tooltips via native HTML “title” attribute. The Vega Tooltip plugin can generate nice HTML tooltips.

Tooltip Based on Encoding

Setting the tooltip property of the mark definition (or config) to true enables the default tooltip, which is based on all fields specified in the encoding.

Note: This is equivalent to setting the tooltip property of the mark definition to {"content": "encoding"}.

Tooltip Based on Underlying Data Point

Setting mark’s tooltip to {"content": "data"} will produce tooltips based on all fields in the underlying data.

Tooltip channel

To create a tooltip, Vega-Lite’s tooltip channel can be mapped to a data field. For example, this bar chart supports tooltips for field b. Hover over the bar and notice the simple tooltip that displays the value of field b for each bar.

To show more than one field, you can provide an array of field definitions. Vega tooltip will display a table that shows the name of the field and its value. Here is an example.

Alternatively, you can calculate a new field that concatenates multiple fields (and use a single field definition).

To give the fields in the tooltip a label that is different from the field name, set the title parameter.

Note that encoding a field without an aggregate as a tooltip means that the field will be used to group aggregates by.

In the example below, adding the tooltip for b means that b becomes part of the fields to group by. Therefore, there is one tick per unique date value.

To avoid that the tooltips groups the data, add an aggregate to the tooltip encoding.

To display an image in a tooltip you can use the Vega Tooltip 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. 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.

{
  "mark": {"type": ..., "tooltip": null, ...},
  "encoding": ...,
  ...
}

Alternatively, you can also set the "tooltip" encoding to null:

{
  "mark": ...,
  "encoding": {
    "tooltip": null
  },
  ...
}

To disable all tooltips, disable it in the config with

"config": {
  "mark": {"tooltip": null}
}

Vega Tooltip plugin

You can further customize the tooltip by specifying a custom event handler via tooltipHandler of the Vega View API. Vega invokes the handler every time a tooltip is shown.

We provide Vega Tooltip, a tooltip handler that creates a customizable HTML tooltip. Below is an example of Vega-Lite visualization with Vega Tooltip plugin. Vega Tooltip comes with Vega Embed so you might already be using it.

Without the tooltip plugin, Vega-Lite will generate tooltips via native HTML “title” attribute. Move your cursor over one of the bars to see it (you might have to wait for a little bit for the tooltip to appear).