Creating Tooltips
Out-of-the-box Zoomdata charts do not include tooltips when embedded. The reason behind it that the tooltip component is part of the native Zoomdata controls and not part of the chart’s code.
To create a tooltip for an embedded chart, when can listen to the tooltip:show event and capture the data necessary to create one.
Likewise, you can listen to the tooltip:hide event to hide the tooltip.
A chart instance exposes an on method that can be used to register a listener for a given event.
You can provide a callback function that executes when the chart triggers the event.
Example:
const embedChart = async () => {
const chart = await client.visualize({
config: queryConfig,
element: document.getElementById('root'),
source,
autoStart: true,
variables: visVariables,
visualization: chartName,
});
charts.push(chart); // push chart to charts array
// create a tooltip container
const $tooltipContainer = $(`<div class="tooltip-container"></div>`);
const tooltipStyle = {
background: '#fff',
position: 'absolute',
border: '1px solid black',
padding: '10px',
};
$tooltipContainer.css(tooltipStyle);
$('#root').append($tooltipContainer);
// add the tooltip content when mousing-over a chart element chart.on('tooltip:show', tooltip => { const tooltipXCoord = tooltip.x; const tooltipYCoord = tooltip.y; const tooltipData = tooltip.data(); const $tooltipContent = $( `<div><div>group: ${tooltipData.group[0]}</div><div>value: ${ tooltipData.current.count }</div></div>`, ); $tooltipContainer.html($tooltipContent.html()); $tooltipContainer.css({ left: `${tooltipXCoord}px`, top: `${tooltipYCoord}px`, display: 'block', }); });
// hide the tooltip when mousing-out of chart element chart.on('tooltip:hide', () => $tooltipContainer.css({ display: 'none' }));
};Try this example on CodeSandbox
Hover over a chart element to display the tooltip.
Updated Jan 10, 2019
