Tooltip

Tooltip can provide details of a particular data point on demand. Tooltips are created with the tooltip channel. By default, the renderer will generate tooltips via native HTML “title” attribute.

Documentation Overview

• Tooltip channel
• Vega Tooltip plugin

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

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