Tooltip stopped working for Google timeline chart

Question

I was using google charts API since last few weeks but since yesterday tooltip stopped working for timeline chart. I have line charts for which tooltip works but somehow only timeline charts seems to be affected by this. Here is the function which creates chart for me:

drawTimelineChart : function(rows, elementId) {
    if(elementId == undefined || elementId == ''){
        elementId = 'day';
    }
    var container = document.getElementById(elementId);

    var chart = new google.visualization.Timeline(container);

    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({
        type : 'string',
        id : 'DateAndBatch',
    });
    dataTable.addColumn({
        type : 'string',
        id : 'TargetTable',
    });
    dataTable.addColumn({
        type : 'date',
        id : 'Start',
    });
    dataTable.addColumn({
        type : 'date',
        id : 'End',
    });
    dataTable.addRows(rows);
    var options = {
        timeline : {
            groupByRowLabel : false,
        }
    };
    chart.draw(dataTable, options);
}

When I look into DOM I can see following node is being inserted in DOM whenever I hover over the timeline blocks but tooltip is not visible on the page.

<div class=​"google-visualization-tooltip" style=​"width:​ 240px;​ height:​ 112px;​ left:​ 424px;​ top:​ 11.472000000000008px;​ pointer-events:​ none;​">​

Can someone tell me how to debug & fix this issue?

Answer 1

I figured out the culprit after lot of debugging but could not get correct reason.

So, actually I am using Twitter bootstrap UI panel in my page and when I put my timeline chart inside panel body, it doesn't work. Here is markup:

<div class="row">
        <div class="panel panel-primary" style="width: 700px;">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Timeline<span class="dateInfo"></span>
                </h3>
            </div>
            <div class="panel-body" id="day" style="height: 1350px;"></div>
        </div>
    </div>

but if I remove "panel-body" class from the div in which I am rendering my chart, it starts working. Looks like some CSS issue but I can't pin point what. So this is the code which works:

<div class="row">
        <div class="panel panel-primary" style="width: 700px;">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Timeline<span class="dateInfo"></span>
                </h3>
            </div>
            <div id="day" style="height: 1350px;"></div>
        </div>
    </div>

Anyways its a good GOTCHA for chart developers if they are using Bootstrap framework.