Edit this page

Tooltips

VictoryTooltip is a label component with defaultEvents It renders a customizeable flyout container as well as a VictoryLabel component. VictoryTooltip can be used with any Victory component by setting the labelComponent prop like so labelComponent={<VictoryTooltip/>

VictoryVoronoiTooltip attaches the VictoryTooltip label component to an invisible VictoryVoronoi data component. VictoryVoronoi tooltip is useful for adding tooltips to elements that do not have individual data elements, like VictoryLine, or adding tooltips to any element that is too small to hover over effectively.

This guide discusses customization and advanced usage of tooltips in Victory

Simple tooltips

The simplest way to add tooltips to a chart is to use VictoryTooltip as a labelComponent as in the example below:

            

When tooltips are added to a chart in this way, defaultEvents on VictoryTooltip are automatically added to the component using them, in this case VictoryBar. By default, VictoryTooltip will adjust its position, orientation, and the width and height of its container to match the corresponding data and labels.

Customizing Tooltips

Tooltips can be customized directly on the the VictoryTooltip component

            

VictoryTooltip is composed of VictoryLabel and the primitive Flyout component. Both of these components are highly configurable, but may also be replaced if necessary.

            

Voronoi Tooltips

VictoryVoronoiTooltip renders a transparent voronoi diagram with VictoryTooltip attached. In the example below the voronoi diagram has been colored to be visible:

            

Voronoi tooltips are useful for adding tooltips to a line, or adding tooltips to data points that are too small to hover over effectively. Use VictoryGroupto provide the same data and styles to several components. This is especially useful when adding voronoi tooltips to a component, as the data required by the tooltip, should be identical to the data required by the other components.

            

Tooltips with Other Events

VictoryTooltip automatically attaches events to data components. When events of the same type are specified for data components, it is necessary to reconcile events so that tooltips still work. For web, the default tooltip events are:

static defaultEvents = [{
  target: "data",
  eventHandlers: {
    onMouseOver: () => {
      return {
        target: "labels",
        mutation: () => ({ active: true })
      };
    },
    onMouseOut: () => {
      return {
        target: "labels",
        mutation: () => ({ active: false })
      };
    }
  }
}];

When other onMouseOver and onMouseOut events are specified for data, the event returns described above must be added to the events for tooltips to continue to work properly.

            

Wrapping VictoryTooltip

The events that control VictoryTooltip are stored on the static defaultEvents property. Wrapped instances of VictoryTooltip will need to replicate or hoist this property in order to add automatic events to the components that use them.