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.



    var mouseX;
    var mouseY;

    $(document).mousemove(function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY
    });, ‘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 });

Leave a Reply

Your email address will not be published. Required fields are marked *