Change tooltip position on Google Charts

It does not support changing tooltip position by any methods.  In case of HTML tooltips, they appear not in desired position.  Next method works, it is based on my findings and own experience.

Before, it is way too left.







After, it is centered right above the point.

Use next “fixToolTipPosition” method to fix it.

var chart = new google.visualization.LineChart();, 'ready', fixToolTipPosition);
chart.draw( cdata, options);

function fixToolTipPosition() {
    var container = $(' > div:last-child > div:last-child')[0];

    function setPosition(e) {
        var tooltip = $('.google-visualization-tooltip');
        var left = mouse.x - tooltip.width()/2;
        var top = mouse.y - tooltip.height() - 15;
        tooltip.css('left', left + 'px');
        tooltip.css('top', top + 'px');

    if (typeof MutationObserver === 'function') {
        var observer = new MutationObserver(function (m) {
        observer.observe(container, {
            childList: true
    } else if (document.addEventListener) {
        container.addEventListener('DOMNodeInserted', setPosition);
    } else {
        container.attachEvent('onDOMNodeInserted', setPosition);


  1. Not working in my code. I got error message like this: “Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.”

    Can you help? Thanks

  2. Constantin,

    I have actually tried several variations of this code to try to fix the position issue with the google timeline charts tooltips. I am also getting the error: “Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.”
    Would you be able to help with this issue. The timeline chart works a bit differently than the other charts so this code just might not work.

Leave a Reply

Your email address will not be published.