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.

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).