Tooltip Plugin for Vega-Lite
Clone or download
Latest commit d5ae395 Dec 5, 2018

Tooltip for Vega & Vega-Lite

npm version Build Status code style: prettier

A tooltip plugin for Vega and Vega-Lite visualizations. This plugin implements a custom tooltip handler for Vega that uses custom HTML tooltips instead of the HTML title attribute. Vega Tooltip is installed in the Vega Editor.

Vega Tooltip 0.9 and above use a new API as described below. Learn what has changed at

demo image



NPM or Yarn

Use npm install vega-tooltip or yarn add vega-tooltip.

Using Vega-tooltip with a CDN

You can import vega-tooltip directly from jsDelivr. Replace [VERSION] with the version that you want to use.

<!-- Import Vega 3 & Vega-Lite 2 (does not have to be from CDN) -->
<script src=""></script>
<script src=""></script>

<script src="[VERSION]"></script>

Usage and APIs

If you use Vega-Embed, you don't need to install Vega Tooltip! Vega Embed already comes with Vega Tooltip. You can however pass tooltip customizations.

vegaEmbed("#vis", spec, {tooltip: {theme: 'dark'}})
  .then(function(result) {
    // result.view contains the Vega view

If you want to ue a different version of the tooltip handler, you can override the default handler with the handler from Vega Tooltip (and you need to install it separately).

var handler = new vegaTooltip.Handler();
vegaEmbed("#vis", spec, {tooltip:})
  .then(function(result) {
    // result.view contains the Vega view

See the API documentation for details.


  1. Creating Your Tooltip
  2. Customizing Your Tooltip

Run Instructions

  1. In the project folder vega-tooltip, type command yarn to install dependencies.
  2. Then, type yarn start. This will build the library and start a web server.
  3. In your browser, navigate to http://localhost:8000/, where you can see various Vega-Lite and Vega visualizations with tooltip interaction.

Release Process

To release a new version, make sure that everything works. Then run yarn version and bump the version number. Lastly, push to GitHub (with the release tag). Travis will build a bundle and make the npm release automatically.