Can I customize the tooltip text in a Google Geochart chart?

Question

Below is the code I'm using, based on a how to I found in Google's documentation, but I'm not sure if it applies to the Geochart, if I'm doing it right, or if there is some other way to do it for a Geochart.

This code works fine if I don't include the tooltip column. When I do, I get the error "Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns)," displayed where the Geochart should be.

This question addresses the same issue, but not specifically for a Geochart.

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

    google.load( 'visualization', '1', { 'packages': ['geochart'] } );
    google.setOnLoadCallback( drawRegionsMap );

    function drawRegionsMap()
    {

        var data = google.visualization.arrayToDataTable([
            [ 'State', 'Relevance', {type: 'string', role: 'tooltip'} ],
            [ 'Alabama', 3, 'tooltip test text' ],
            [ 'Arizona', 1, 'tooltip test text' ],
        ]);

        var options =
        {
            region:         'US',
            resolution:     'provinces',
        };

        var chart = new google.visualization.GeoChart( document.getElementById( 'chart_div' ) );
        chart.draw( data, options );

    };

</script>

Answer 1

In order to customize the tooltip to use html including new line / images please check this example: http://jsfiddle.net/SD4KA/

    google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Value', {role: 'tooltip', p:{html:true}}],
        ['Russia', 5, 'Hello world<br>test'],
        ['US', 20, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']]);
    var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
    chart.draw(data, {
        width: 800,
        height: 600,
        tooltip: {
            isHtml: true
        }
    });
}

Since v1.1 geochart supports html for tooltips

Answer 2

I was able to include the text i wanted in the tooltip, including the values this way:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Country'); // Implicit domain label col.
data.addColumn('number', 'Value'); // Implicit series 1 data col.
data.addColumn({type:'string', role:'tooltip'}); // 

data.addRows([

    [{v:"US",f:"United States of America"},1,"21% of Visits"],

    [{v:"GB",f:"United Kingdom"},2,"7% of visits"],

    [{v:"DE",f:"Germany"},3,"6% of visits"],

    [{v:"FR",f:"France"},4,"5% of visits"],

    [{v:"ES",f:"Spain"},5,"5% of visits"],

    [{v:"CA",f:"Canada"},6,"4% of visits"],

    [{v:"IT",f:"Italy"},7,"4% of visits"],

    [{v:"NL",f:"The Netherlands"},8,"4% of visits"],

    [{v:"BR",f:"Brazil"},9,"4% of visits"],

    [{v:"TR",f:"Turkey"},10,"3% of visits"],

    [{v:"IN",f:"India"},11,"3% of visits"],

    [{v:"RU",f:"Russia"},12,"3% of visits"],

    [{v:"AU",f:"Australia"},13,"2% of visits"],

]);

This way, for example "United States of America" would be line 1 of the tooltip, and "21% of visits" would be the second line. With this format I can include whatever text I want in the tooltip, in both lines.