Google Charts - full html in tooltips

Question

I am trying to make Google Charts Display custom tooltips with full HTML in them.

I know how to enable tooltips and pass appropriate data - the problem is - even when allowHTML option is enabled, the tooltips are rendered as plain text, so for example I can't show a picture in the tooltip.

Here is a little example of what I am going for:

What I have now:

What I want:

One way to solve this problem is to disable tooltips, capture onmouseover events and use another library (like cluetip) to display tooltips at cursor, but I was wondering if there is a cleaner, native way to enable this kind of functionality in Google Charts.

Also please check out my other question about images as point markers in google charts.

Edit:

In the meantime I found a very good and quite inexpensive (60$ per website license) library that covers this functionality : Highcharts library

As you can see in the example it is possible to pass a function that will format the tooltips - easily enough we could add a special property to each datapoint containig an url that could be used to dynammically load the tooltips content. The tooltips can then be cached by adding an extra property to each data point in a serie. I've implemented it this way and it works perfectly.

Hope the latest edit will help someone.

Answer 1

Google gives an example here.

You will need to designate the column to be html tooltip:

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

You will also need to pass the correct option to your chart:

tooltip: {isHtml: true}

I have tested this with line chart, and it works.

Edit: It also looks like (at least for line chart) you have to use the chart wrapper for this to work. I couldn't get it to obey the options without the wrapper.

Answer 2

This feature was incredibly obscure! The key for me, as noted earlier, was adding ", 'p': {'html': true}" when using 'addColumn()' to define a tooltip; the 'draw()' option 'tooltip: {isHtml: true}' alone is not enough.

It's very handy to use a function call to return the HTML string when creating the array of 'graphItems' that gets passed to 'addRows()':

function myToolTip(row) {
    return '<div style="white-space: nowrap; padding:5px;"><b>' + row.name + '</b><br>' +
        '$' + row.worth + ' B, <b>' + _scope.sortBy + '</b>: ' + row[_scope.sortBy] + '</div>';
}

var graphItems = [];
angular.forEach(_scope.ForbesList, function(row, key) {
    graphItems.push([key, row.worth, myToolTip(row)]);
});

var data = new google.visualization.DataTable();
data.addColumn('number', 'Rank');
data.addColumn('number', 'Worth');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addRows(graphItems);

More here: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content