谷歌图表HTML工具提示问题

Question

When I select one point at chart, tooltip html content is correct, but when select 2 and more points, tooltips merge in one and html of each one is visible. Are smbd know what i do wrong ? Can smbd help me ?

var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time');

  data.addColumn('number' , "id");
  data.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});

  var dataArray = [];

  tooltipContent = "<div class='google-chart-tooltip'><center class='google-chart-tooltip-date'>Date: " + date + "</center><br /><p>Value1: " + value1 + ";<br />Value2: " + value2 + ".</p></div>";

  //fill dataArray

  data.addRows(dataArray);
}
var currentChartOptions = {
  tooltip: {
    isHtml: true,
    trigger: 'selection'
  },
  selectionMode: 'multiple',
  interpolateNulls: true,
  hAxis: {
    title: 'Time'
  },
  vAxis: {
      title: "Values"
  }
};

Follows an image of the issue:

Answer 1

looks like a bug, from what i can tell, code looks fine

there are no missing options or anything like that

and it is easily replicated, as in the following example

you could use aggregationTarget: 'none' to force each tooltip to be shown separately

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable(); data.addColumn('date', 'Time'); data.addColumn('number' , 'id'); data.addColumn({type: 'string', role: 'tooltip', p: {html: true}}); var dataArray = [ [new Date(2016, 11, 18), 1000, 400], [new Date(2016, 11, 19), 1170, 1170], [new Date(2016, 11, 20), 660, 1120], [new Date(2016, 11, 21), 1030, 540] ]; dataArray.forEach(function (row) { data.addRow([ row[0], row[1], '<div class="google-chart-tooltip"><center class="google-chart-tooltip-date">Date: ' + row[0] + '</center><br /><p>Value1: ' + row[1] + ';<br />Value2: ' + row[2] + '.</p></div>' ]); }); var currentChartOptions = { aggregationTarget: 'none', tooltip: { isHtml: true, trigger: 'selection' }, selectionMode: 'multiple', interpolateNulls: true, hAxis: { title: 'Time' }, vAxis: { title: 'Values' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, currentChartOptions); }, packages:['corechart'] }); 

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