Google Charts/Visualization - dismiss tooltip on click away

Question

Using Google Charts (haven\'t migrated to the Material ones yet), one can make tooltips require a click by using the {trigger: \'selection\'} option. However, u

Answer 1

I was able to get something similar to work: not to get the tooltip to vanish when you click away, but when you click on the tooltip iteself. Maybe you can add a close button to the tooltip.

First, it has to be an html tooltip:

tooltip: { isHtml: true }

Then you must add the following somewhere in the string html that you pass to the chart (assuming jQuery):

$("
").attr("onclick", "$(this).closest('.google-visualization-tooltip').hide()")

Or something similar if you're not using jQuery. This only seems to work for an inner div of the html content you pass for the tooltip, so this needs to be a child div.

Also, you will need to add the following event handler to the chart:

google.visualization.events.addListener(chart, "onmouseover", function(event){
      chart.setSelection(null);
});

Otherwise the tooltip will pop back up when you hover the chart.