Google Charts, Html tooltips don't appear on bar chart - google-visualization

Question

I created a bar chart, with an html tooltip that displayed an image. This worked perfectly. I then added event handlers for the Ready and Select events and a bootstrap modal that pops up when the user clicks on one of the bars. Now the html tooltips don't appear any more when you hover over a bar. But, if I change the code to say "tooltip: {}", then I do get the tooltip showing the html content (as text). I'm not sure if this is as a result of adding the event handlers, or adding bootstrap, but I can't get the tooltips to show an image any more.
How can I get the tooltips to show again? and how can I get them to show when I hover over the annotation on the bar? I thought that was what annotationText was for, but my (text) tooltip only shows when I hover over the bar, not the text.
Here is a cut down version of the code with irrelevant bits omitted for clarity:
var DashboardWindow = new function()
{
this.DetailChart = null;
this.onLoad = function()
{
google.charts.load( 'current', { 'packages': ['corechart', 'bar'] } );
google.charts.setOnLoadCallback( this.drawCharts );
j$( '#detailsPopup' ).on( 'show.bs.modal', DashboardWindow.getDetailsData );
}
this.detailsReadyHandler = function()
{
google.visualization.events.addListener( DashboardWindow.DetailChart, 'select', DashboardWindow.detailsSelectHandler );
}
this.detailsSelectHandler = function( e )
{
var selection = DashboardWindow.DetailChart.getSelection();
if( selection.length > 0 )
{
var item = DashboardWindow.DetailChartData.getValue( selection[0].row, 0 );
j$( '#detailsPopupTitle' ).text( item );
j$( '#detailsPopup' ).modal( { show: true, keyboard: true } );
}
}
this.drawCharts = function()
{
.....
j$.ajax( {
type: "POST",
url: .....
} ).done( function( result )
{
if( result.d.Detail != null )
{
var data = new google.visualization.DataTable();
var groupHeader = j$( '#' + Dashboard_DetailsType ).val();
data.addColumn( 'string', groupHeader );
data.addColumn( 'number', 'NPS Score' );
data.addColumn( { type: 'string', role: 'annotation' } );
data.addColumn( { type: 'string', role: 'style' } );
data.addColumn( { type: 'string', role: 'tooltip', p: { 'html': true } } );
data.addColumn( { type: 'string', role: 'annotationText', p: { 'html': true } } );
result.d.Detail.forEach( function( row )
{
var red = ....
var green = ....
var tooltip = '';
if( row.NPS != null )
{
tooltip = '<div class="tooltip"><b>' + row.GroupName + '</b><br/><hr/>NPS Score: <b>' + row.NPS.toFixed( 1 ) + '</b><br/>Responses: ' + row.NPSMessageCount.toString() + '<br>'
+ 'Last Score: ' + ( row.LastNPS == null ? 'none' : row.LastNPS.toFixed( 1 ) ) + '<br/>'
+ '<img id="overall_nps_score_trend" alt="trend" src="images/icons/trend-' + ( ( row.Trend == 1 ) ? 'up' : ( ( row.Trend == 255 ) ? 'down' : 'same' ) ) + '-64.png" /></div>';
}
data.addRow( [
row.GroupName,
row.NPS,
row.NPS == null ? '' : row.NPS.toFixed( 1 ) + ' (' + row.NPSMessageCount.toString() + ' Responses)',
row.NPS == null ? '' : 'color: #' + red + green + '50',
tooltip,
tooltip
] );
} );
var chartWidth = j$( '#nps_details_chart' ).width() - 300;
var options =
{
bar: { groupWidth: "90%" },
legend: { position: "none" },
hAxis: { minValue: 0, maxValue: 100 },
chartArea: { left: 260, top: 20, width: chartWidth, height: result.d.Detail.length * 34 - 80 },
height: result.d.Detail.length * 34,
tooltip: { isHtml: true, ignoreBounds: true, trigger: focus }
};
DashboardWindow.DetailChartData = data;
DashboardWindow.DetailChart = new google.visualization.BarChart( document.getElementById( "nps_details_chart" ) );
google.visualization.events.addListener( DashboardWindow.DetailChart, 'ready', DashboardWindow.detailsReadyHandler );
DashboardWindow.DetailChart.draw( data, options );
}
} )
.fail( function( response, status, error )
{
....
} );
}
}
function pageLoad()
{
DashboardWindow.onLoad();
}

Answer 1

For anyone else with a similar issue, there were 2 problems here.
The first was my use of 'div class="tooltip"' in my tooltip content, as bootstrap.css defines a tooltip class which seems to prevent the tootip being displayed. Changing the class name fixed the issue.
The second problem was tooltips not appearing over the annotation text. This is most noticable when the bar length is zero as there is no way to see the tootip. This code demonstrates the issue:
<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["District", "Score", { role: "annotation" }, { role: "tooltip", p: { html: true } } , { role: "annotationText", p: { html: true } }],
["District 1", 25, "12 (6 Responses)", "<b>Score 12</b><br/>(6 Responses)", "<b>Score 12</b><br/>(6 Responses)"],
["District 2", 5, "5 (8 Responses)", "<b>Score 5</b><br/>(8 Responses)", "<b>Score 5</b><br/>(8 Responses)"],
["District 3", 3, "3 (14 Responses)", "<b>Score 3</b><br/>(14 Responses)", "<b>Score 3</b><br/>(14 Responses)"],
["District 4", 0, "0 (3 Responses)", "<b>Score 0</b><br/>(3 Responses)", "<b>Score 0</b><br/>(3 Responses)"],
["District 5", 18, "18 (9 Responses)", "<b>Score 18</b><br/>(9 Responses)", "<b>Score 18</b><br/>(9 Responses)"],
]);
var options = {
title: "District Scores",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
tooltip: { isHtml: true },
legend: { position: "none" },
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(data, options);
}
</script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>
</body>
</html>
swapping the order of the tooltip and annotationText within the data fixes the issue. (i.e. make the annotationText the 4th column following the annotation).
I still can't get a tooltip over the annotation when the annotation is within the bar, but if the bar is short so that the annotation is outside of the bar then the tooltip is displaying ok.