customizing_your_tooltip.md

Customizing Your Tooltip

Previous Tutorial: Creating Your Tooltip.

Passing options

You can customize the tooltip by passing in an optional options parameter. These options are defined in the API.

For example:

var tooltipOptions = {
  theme: 'dark'
};

If you use Vega-Embed, you can pass your tooltip customizations as an option.

vegaEmbed("#vis", spec, {tooltip: tooltipOptions})
  .then(function(result) {
    // result.view contains the Vega view
  })
  .catch(console.error);

var handler = new vegaTooltip.Handler(tooltipOptions);

var runtime = vega.parse(spec);
var view = new vega.View(runtime)
  .tooltip(handler.call)  // note that you have to use `handler.call`!
  .initialize(document.getElementById("vis"))
  .run();

Customizing the theme

Vega tooltip has two predefined themes light and dark. You can create your own custom theme or override any of the existing CSS properties.

To use a custom theme, pass the theme option to Vega tooltip.

var tooltipOptions = {
  theme: 'custom'
};

vegaEmbed("#vis", spec, {tooltip: tooltipOptions})
  .then(function(result) {
    // result.view contains the Vega view
  })
  .catch(console.error);

Then create the style for your theme.

#vg-tooltip-element.vg-tooltip.custom-theme {
  color: red;
}

Customizing the rendered tooltip HTML

Vega tooltip can be further customized using the formatTooltip option.

It is highly recommended to follow the pattern below in sanitizing data from the value argument.

var tooltipOptions = {
  formatTooltip: (value, sanitize) => `My custom tooltip and ${sanitize(value)}.`
};

vegaEmbed("#vis", spec, {tooltip: tooltipOptions})
  .then(function(result) {
    // result.view contains the Vega view
  })
  .catch(console.error);