Tooltip

Edit this page

Tooltip can provide details of a particular data point on demand. There are two ways to create a tooltip in Vega-Lite.

Documentation Overview

Using Tooltip channel

To quickly create a tooltip without a plugin, 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 calculate a new field that concatenates multiple fields. You can further customize the tooltip by specifying a custom event handler that gets invoked every time tooltip displays via tooltipHandlerof the Vega View API.

Using Vega-tooltip plugin

While tooltip provides a quick and easy way to add a tooltip, it is limited to displaying one field on the tooltip at a time. Vega-tooltip is a tooltip plugin for both Vega and Vega-lite visualizations that generates tooltips using a HTML table element to show values of multiple data fields. For more information about how to create a tooltip using vega-tooltip, please see vega-tooltip’s documentation. Below is an example of Vega-lite visualization with vega-tooltip plugin.