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.custom-theme {
  color: red;
}