更改Google时间线图表工具提示的弹出位置

Question

我可以仅使用CSS修改工具提示的位置：

.google-visualization-tooltip {  position:relative !important; top:0 !important;right:0 !important; z-index:+1;}

但是有一种技巧可以始终相对于鼠标位置显示它吗？

我尝试使用突变观察器，但似乎不适用于时间线图。

更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。更多文字。

google.charts.load('current', {
  callback: drawChart,
  packages:['timeline']
});

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

  dataTable.addColumn({ type: 'string', id: 'Row label' });
  dataTable.addColumn({ type: 'string', id: 'Bar Label' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'Row 1', 'Bar 1 ', new Date(2016, 7, 1, 0, 30), new Date(2016, 7, 1, 0, 35) ],
    [ 'Row 1', 'Bar 2', new Date(2016, 7, 1, 1, 15), new Date(2016, 7, 1, 2, 45) ],
    [ 'Row 1', 'Bar 3', new Date(2016, 7, 1, 3, 50), new Date(2016, 7, 1, 4, 15) ]
  ]);

google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    var container = document.querySelector('#timeline > div:last-child');
    function setPosition(e) {
      if (e && e.target) {
        var tooltip = $(e.target);
          setTimeout(function () {
            var left = parseFloat(tooltip.css('left')) - 49;
            var top = parseFloat(tooltip.css('top')) - 40;
            tooltip.css('left', left + 'px');
            tooltip.css('top', top + 'px');
            $(".google-visualization-tooltip").fadeIn(200);
          }, 1);
      }
      else {
        var tooltip = container.querySelector('.google-visualization-tooltip');
        var left = parseFloat(tooltip.style.left) - 49;
        var top = parseFloat(tooltip.style.top) - 40;
        tooltip.style.left = left + 'px';
        tooltip.style.top = top + 'px';
        $(".google-visualization-tooltip").fadeIn(200);
      }
    }
    if (typeof MutationObserver === 'function') {
      var observer = new MutationObserver(function (m) {
        if (m.length && m[0].addedNodes.length) {
          setPosition(m);
        }
      });
      observer.observe(container, {
        childList: true
      });
    }
    else if (document.addEventListener) {
      container.addEventListener('DOMNodeInserted', setPosition);
    }
    else {
      container.attachEvent('onDOMNodeInserted', setPosition);
    }
  });



  chart.draw(dataTable, {
    timeline: {
    }
  });
}
  

div.google-visualization-tooltip {
    width: auto;
    height:auto;
    background-color: #ccccff;
    color: #000000;
    text-align: center;
    vertical-align: middle;
}

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