Add Symphony Tooltips

This applies to: Visual Data Discovery

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

To show a tooltip, use controller.tooltip.show. The showmethod 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 Symphony 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. This can be used to render custom tooltips.

Example:

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

In the above example, we have a reference to chart instance stored in the myChart variable. It hooks into the mouseoverevent of the chart and provides a handler function. The chart provides the handler function with an object argument param with the x and y screen coordinates that describe where the tooltip should display.

In this example, the chart has also provided the original Symphony data element for the hovered point. controller.tooltip.show can be called with an object that specifies the tooltip location and data for the tooltip.

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

Example:

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

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