Dismiss Google Pie Chart Tooltip on Click Away

I am using a Google Pie Chart for data representation. The chart's tooltips include action items that users can click on. To keep the tooltips open long enough for users to click the items, I have opted to have the tooltips show on click/selection rather than on hover:

tooltip: { trigger: 'selection' }

The problem now is that the only way to close these tooltips is to either make another selection on the chart (thus showing another tooltip) or to click the same legend/pie slice value that was previously selected.

This is clunky; for good UX, I want to allow users to dismiss tooltips simply by clicking the empty space around the pie chart.

So far the closest solution I have found is in this question, but the first answer does not work and the second does not allow the tooltip to be closed by click-away. The problem appears to be that all of the whitespace around the chart is still considered part of the chart itself rather than a separate element. I tried to get around this limitation by checking the type of the clicked element to see whether it was the whitespace as shown below:

function clearChartSelection(e) {

        if (!chartDOMElement.contains(e.srcElement) || e.srcElement.tagName.toUpperCase() == 'RECT') {
            chart.setSelection();
        }
    }

Unfortunately, this didn't work either as the legend element sometimes renders as a rectangle type instead of text (I'm still trying to figure out what causes this). In pie charts, legend clicks also set the selection, and I want to keep this functionality.

Right now I'm investigating the following two paths, but without luck:

1. Some other way to distinguish between the slices/legend and the empty chart area, or

2. Somehow prevent the click event if the selection event is also triggered.

I'm definitely open to any other ideas that may resolve this issue. The functionality I want is pretty common for tooltips in general, so hopefully I've just missed something obvious.

in addition to the body click,
use the chart's click event

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['A', 1],
    ['B', 2],
    ['C', 2],
    ['D', 2],
    ['E', 7]
  ]);

  var options = {
    tooltip: {
      trigger: 'selection'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);

  google.visualization.events.addListener(chart, 'click', clearSelection);
  document.body.addEventListener('click', clearSelection, false);

  chart.draw(data, options);

  function clearSelection(e) {
    if (!container.contains(e.srcElement)) {
      chart.setSelection();
    }
  }
});

html, body {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>