To help you get started, we've collected the most common ways that vega-tooltip is being used within popular public projects.

vega / voyager / src / components / vega-lite / index.tsx View on Github

//   "encoding": {
    //     "x": {"field": "a", "type": "quantitative"},
    //     "y": {"field": "b", "type": "quantitative"}
    //   }
    // };
    const {logger} = this.props;
    const vlSpec = this.props.spec;
    try {
      const spec = vl.compile(vlSpec, logger).spec;
      const runtime = vega.parse(spec, vlSpec.config);
      this.view = new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(this.refs[CHART_REF] as any)
        .renderer(this.props.renderer || 'canvas')
        .hover();
      vegaTooltip.vega(this.view);
      this.bindData();
    } catch (err) {
      logger.error(err);
    }
  }

View more ways to use vega-tooltip

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

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

Installing

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.

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

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 https://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 yarn deploy:gh.