Изменить всплывающее местоположение всплывающей подсказки Google Timeline Charts - PullRequest
Новая
       8

Изменить всплывающее местоположение всплывающей подсказки Google Timeline Charts

0 голосов
/ 31 мая 2019

Я могу изменить местоположение всплывающей подсказки, используя только 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>
...