Adding Zoomdata Tooltips

Charting libraries often include a tooltip implementation that may not look similar to the tooltips included with Zoomdata native charts. As a developer, you can re-use the Zoomdata tooltip design in your custom charts by leveraging the show and hide methods in controller.tooltip.

To show a tooltip, use controller.toolitp.show. The show method takes an object as its only argument with the following properties:

Option Description
x The x coordinate on the screen where the tooltip should render
y The y coordinate on the screen where the tooltip should render
data Function that returns a Zoomdata data element

Optional properties:

Option Description
event Takes a native browser event to specify the tooltip position. Use as an alternative to x and y properties.
content Function that returns an HTML string to replace the content inside of the tooltip boxes

Example:

myChart.on('mouseover', function(param) {
  controller.tooltip.show({
    x: param.x,
    y: param.y,
    data: function() {
      return param.zdDataElement;
    },
  });
});

In the above example, we have a reference to chart instance stored in the myChart variable. We hook into the mouseover event of the chart and provide a handler function. The handler function receives an object argument param with the x and y screen coordinates where the tooltip should display. Additionally, we can also access the Zoomdata data element for the hovered point. You can assign these properties to an object passed when calling thecontroller.tooltip.show method.

To hide the tooltip, we can call the controller.tooltip.hide method.

Example:

myChart.on('mouseout', function() {
  controller.tooltip.hide();
})

Here we hook into the mouseout event and provide a handler function that calls the controller.tooltip.hide method.