vega-tooltip

What is vega-tooltip?

The vega-tooltip npm package provides a way to add customizable tooltips to Vega and Vega-Lite visualizations. It enhances the interactivity of visualizations by displaying additional information when users hover over data points.

What are vega-tooltip's main functionalities?

Basic Tooltip

This feature allows you to add a basic tooltip to a Vega or Vega-Lite visualization. The tooltip displays information about the data point that the user is hovering over.

const vegaTooltip = require('vega-tooltip');
const view = new vega.View(vega.parse(spec))
  .renderer('canvas')
  .initialize('#view')
  .hover()
  .run();
vegaTooltip.vega(view);

Custom Tooltip Content

This feature allows you to customize the content of the tooltip. You can format the tooltip content in any way you like by providing a custom format function.

const vegaTooltip = require('vega-tooltip');
const handler = new vegaTooltip.Handler({
  formatType: 'custom',
  format: (value) => `Custom content: ${value}`
});
const view = new vega.View(vega.parse(spec))
  .renderer('canvas')
  .initialize('#view')
  .hover()
  .run();
vegaTooltip.vega(view, handler);

Styling Tooltips

This feature allows you to style the tooltips by specifying a theme. The example shows how to apply a dark theme to the tooltips.

const vegaTooltip = require('vega-tooltip');
const handler = new vegaTooltip.Handler({
  theme: 'dark'
});
const view = new vega.View(vega.parse(spec))
  .renderer('canvas')
  .initialize('#view')
  .hover()
  .run();
vegaTooltip.vega(view, handler);

Other packages similar to vega-tooltip

d3-tip

d3-tip is a tool for creating tooltips in D3.js visualizations. It provides similar functionality to vega-tooltip but is specifically designed for use with D3.js. It allows for customizable and styled tooltips, but requires more manual setup compared to vega-tooltip.

tippy.js

tippy.js is a highly customizable tooltip and popover library. While it is not specifically designed for data visualizations, it can be used to create tooltips for any HTML element, including those in visualizations. It offers more flexibility and customization options compared to vega-tooltip.

README

Tooltip for Vega & Vega-Lite

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.

Features

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

Demo

http://vega.github.io/vega-tooltip/

Installing

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

You can install Vega tooltip directly with npm install 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="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>

<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@[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
  })
  .catch(console.error);

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: handler.call})
  .then(function(result) {
    // result.view contains the Vega view
  })
  .catch(console.error);

See the API documentation for details.

Tutorials

• Creating Your Tooltip
• Customizing Your Tooltip

Run Instructions

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

Publishing

To make a release, run npm run release. The update the website with npm run deploy:gh.

Changelog

1.0.0 (2025-03-27)

Bug Fixes

• update defaults.ts to fix custom EL_ID replacing logic (#1019) (cc397ff)