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.

Demo

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

Installing

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="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>

<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@[VERSION]"></script>

Usage and APIs

The simplest example is to use Vega-Embed.

vegaEmbed("#vis", spec)
  .then(function(result) {
    vegaTooltip.default(result.view);
  })
  .catch(console.error);

See the API documentation for details.

Tutorials

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.