Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Tooltip for Vega & Vega-Lite

npm version Build Status codecov 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.

demo image


  • Renders nice tooltips for Vega and Vega-Lite charts
  • Supports dark and light theme
  • Renders object-valued tooltips as a table
  • Supports special keys title (becomes the title of the tooltip) and image (used as the url for an embedded image)



We recommend using Vega-Embed, which already comes with this tooltip plugin.

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 5 & Vega-Lite 4 (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 use 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.


To make a release, run npm run release.