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 theencoding
, (2)generated based on the underlying data point, or (3)directly specified via thetooltip
channel.
By default, the renderer will generate tooltips via native HTML“title” attribute. TheVega Tooltip plugin can generate nice HTML tooltips.
Setting thetooltip
property of themark definition (or config) totrue
enables the default tooltip, which is based on all fields specified in theencoding
.
Note: This is equivalent to setting thetooltip
property of the mark definition to{"content": "encoding"}
.
Setting mark’stooltip
to{"content": "data"}
will produce tooltips based on all fields in the underlying data.
To create a tooltip, Vega-Lite’stooltip
channel can be mapped to a data field. For example, this bar chart supports tooltips for fieldb
. Hover over the bar and notice the simple tooltip that displays the value of fieldb
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 cancalculate 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 thetitle
parameter.
Note that encoding a field without anaggregate 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 theVega Tooltip plugin. Vega Tooltip requires the special field nameimage
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 thetooltip
property of the mark definition (as detailed above) or by passing the fieldas 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 withdata: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 themax-width
andmax-height
properties of the CSS selector#vg-tooltip-element img
.
To disable tooltips for a particular single view specification, you can set the"tooltip"
property of a mark definition block tonull
.
{ "mark": {"type": ..., "tooltip": null, ...}, "encoding": ..., ...}
Alternatively, you can also set the"tooltip"
encoding tonull
:
{ "mark": ..., "encoding": { "tooltip": null }, ...}
To disable all tooltips, disable it in theconfig with
"config": { "mark": {"tooltip": null}}
You can further customize the tooltip by specifying a custom event handler viatooltipHandler
of theVega View API
. Vega invokes the handler every time a tooltip is shown.
We provideVega Tooltip, a tooltip handler that creates a customizable HTML tooltip. Below is an example of Vega-Lite visualization withVega Tooltip plugin. Vega Tooltip comes withVega 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).