Google Charts Advanced Tooltip Placement

One Reply to “Google Charts Advanced Tooltip Placement”

1. Hi Bill,

   Thank you for the post.

   You helped me resolve a similar issue with the Google Charts Timelines not positioning tooltips correctly when in a scrolling container.

   The final solution I arrived at was to just reposition the tooltip based on the mouse cursor position, and I am now adding some improvements to adjust for tooltip size and container borders.

   Cheers,

   Martin

   var mouseX;
   var mouseY;

   $(document).mousemove(function (e) {
   mouseX = e.pageX;
   mouseY = e.pageY
   });

   google.visualization.events.addListener(chart, ‘onmouseover’, function (e) {
   setTooltipPosition(chart, dataTable, e);
   });

   function setTooltipPosition(chart, dataTable, event) {

   if (event.row === undefined) return;
   const row = event.row;
   const tooltip = $(chart.container).find(‘.google-visualization-tooltip’);
   if (tooltip.length) {
   tooltip.css({ ‘top’: mouseY – 120, ‘left’: mouseX – 10 });
   }
   };

   Reply