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.

The current version works with Vega 3 and Vega-Lite 2. For Vega 2 and Vega-Lite 1, use the old version of Vega-Tooltip.

Author

Vega Tooltip was built by Zening Qu and Sira Horradarn, with significant help from Dominik Moritz and Kanit "Ham" Wongsuphasawat.

Demo

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

Installing

NPM

If you use NPM, run command npm install vega-tooltip. For vanilla:

Using Vega-tooltip with a CDN

You can import vega-tooltip directly from CDNJS to your script tag. Please replace [VERSION] with the desired Vega, Vega-lite and Vega-tooltip versions.

<!-- Dependencies for Vega visualization-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/[VERSION]/vega.min.js"></script>

<!-- Dependencies for Vega-lite visualization-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/[VERSION]/vega-lite.min.js"></script>

<!-- Vega Tooltip -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-tooltip/[VERSION]/vega-tooltip.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vega-tooltip/[VERSION]/vega-tooltip.min.css">

APIs

For Vega-Lite: vegaTooltip.vegaLite(vgView, vlSpec[, options])

For Vega: vegaTooltip.vega(vgView[, options])

Tutorials

1. Creating Your Tooltip
2. Customizing Your Tooltip
3. Examples and Code on bl.ocks.org

Run Instructions

1. In the project folder vega-tooltip, type command npm install to install dependencies.
2. Then, type npm 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.