通过选择触发谷歌时间线工具提示答案

【问题标题】：Trigger google timeline tooltip with selection通过选择触发谷歌时间线工具提示
【发布时间】：2015-08-27 11:16:04
【问题描述】：

我需要在选择而不是悬停时触发时间轴图表工具提示。这似乎不起作用。

如果我在图表选项中有此工具提示，我会得到：工具提示：{ isHtml: true, trigger: 'focus' }

但如果我把它改成这样： tooltip: { isHtml: true, trigger: 'selection' }，当我点击时间线栏时，工具提示不显示。

这应该可以通过时间线图表实现吗？我在文档中找不到任何内容说它不受支持，尽管我可能遗漏了一些东西......

【问题讨论】：

标签： charts google-visualization tooltip timeline

【解决方案1】：

唯一受支持的trigger 将在时间轴图表中打开工具提示是focus

可能的解决方法：

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'President'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
  ]);
  //select-handler
  google.visualization.events.addListener(chart, 'select', function(e) {
    //the built-in tooltip
    var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])');
    //remove previous clone when there is any
    if (chart.ttclone) {
      chart.ttclone.parentNode.removeChild(chart.ttclone)
    }
    //create a clone of the built-in tooltip
    chart.ttclone = tooltip.cloneNode(true);
    //create a custom attribute to be able to distinguish
    //built-in tooltip and clone
    chart.ttclone.setAttribute('clone', true);
    //inject clone into document
    tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);
  });

  chart.draw(dataTable, {tooltip: {isHtml: true }});
}

.google-visualization-tooltip {
  opacity: 0 !important;
  max-width: 200px !important;
}
.google-visualization-tooltip[clone] {
  opacity: 1 !important;
}
html,
body,
timeline {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
<div id='timeline' style="height:90%"></div>

它仍然使用默认行为（焦点上的工具提示）。但是内置的工具提示是隐藏的（通过 CSS）

在选择处理程序中，它从文档中提取内置工具提示（它被隐藏了，但它仍然存在）并创建一个将注入文档的克隆。

【讨论】：