Tooltip
Edit this pageTooltips 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.
Documentation Overview
- Tooltip Based on Encoding
- Tooltip Based on Underlying Data Point
- Tooltip channel
- Disable tooltips
- Vega Tooltip plugin
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).