How to sync and display the tooltips of different google charts?

Question

I'm creating different google charts on two iframes for comparison purpose. To achieve that I need to sync the mouse click on both the charts and display the tooltips at the particular position of the click.

Although I've achieved syncing the mouse click by using the chart_2.setSelection(chart_1.getSelection()); method.

But the tooltip doesn't get displayed on the second chart at that specific position:

The only way to display the tooltip on the second chart is by clicking the chart and then the tooltip gets activated:

After it gets activated then the tooltip syncs with the first chart and works flawlessly with each click:

What I'm trying to achieve is to display the tooltip on the second chart without manually activating it but it rather gets displayed with each click on the first chart.

Answer 1

set the following option to cause the tooltip to be displayed on --> setSelection

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

see following working snippet,
when the 'ready' event fires, a selection is made,
to demonstrate the tooltip is displayed

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['x', 'y0', 'y1', 'y2', 'y3'], [1, 10, 15, 20, 25], [2, 12, 18, 24, 30], [3, 14, 21, 28, 35], [4, 16, 24, 32, 40] ]); var options = { pointSize: 4, tooltip: { trigger: 'both' }, width: 360 }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'ready', function () { chart.setSelection([{row: 2, column: 1}]); }); chart.draw(data, options); }); 

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