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.
