Google Geochart (1.1) tooltip styles

Question

I'm using Google's Geochart and following a bunch of the examples and options here: https://developers.google.com/chart/interactive/docs/gallery/geochart and generally it's been successful, but I'm curious about two things:

1. Is it possible to define the width, border etc of the tooltip.
2. I'm trying to change the font-size within the tooltip but it doesn't seem to be working.
3. Can you change the hover state to a click state, or better yet, can you have it that if you click a country something happens? Takes you to a different page etc.

I am using version 1.1 as it allows for HTML in the tooltip, but I cannot find any documentation for this anywhere.

google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Coverage', {role: 'tooltip', p:{html:true}}],
        ['United Kingdom', 2, 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.'],
        ['United States', 2, 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.'],
        ['China', 2, 'Hello China'],
        ['Brazil', 2, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']
    ]);
    var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        legend: 'none',
        tooltip: {
            isHtml: true,
            textStyle: { 
                fontSize: 21 
            }
        },
        colorAxis: {colors: ['#F1F1F1', '#4CBCBF']} // grey to cyan
    };
    var chart = new google.visualization.GeoChart(document.getElementById('chart-canvas'));
    chart.draw(data, options);
}

<div id="chart-canvas" style="height:500px;"></div>

For the sake of all our sanity, I have set up a jsFiddle http://jsfiddle.net/w5DYt/

Thanks, R

Answer 1

1) Google doesn't support this, however you can manually overwrite it:

.google-visualization-tooltip{
    width:100px !important;
    border: 2px solid red !important;
} 

2) the isHtml: true overrides your textStyle configuration, you should wrap you text in a span with a class and then use css to set your desired textStyle

3) Google doesn't support click handler, but has a selection one. You could do something like this:

var chart = new google.visualization.GeoChart(document.getElementById('chart-canvas'));

function ready(){
    google.visualization.events.addListener(chart, 'select', handler);
    function handler(){
        var selection=chart.getSelection();
        if(selection.length==1){
            console.log(data.getValue(selection[0].row,2))
        }
    }        
}

google.visualization.events.addListener(chart, 'ready', ready);

chart.draw(data, options);

Full fiddle: http://jsfiddle.net/w5DYt/1/

Answer 2

You can wrap your tooltip contents in a div and use a class (or inline styles) to style it:

[javascript]

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Coverage', {role: 'tooltip', p:{html:true}}],
        ['United Kingdom', 2, '<div class="tooltip">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>'],
        ['United States', 2, '<div class="tooltip">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>'],
        ['China', 2, '<div class="tooltip">Hello China</div>'],
        ['Brazil', 2, '<div class="tooltip">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>']
    ]);
    var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        legend: 'none',
        tooltip: {
            isHtml: true,
            textStyle: { 
                fontSize: 21 
            }
        },
        colorAxis: {colors: ['#F1F1F1', '#4CBCBF']} // grey to cyan
    };
    var chart = new google.visualization.GeoChart(document.getElementById('chart-canvas'));
    chart.draw(data, options);
}

[CSS]

.tooltip {
    width: 200px;
    min-height: 50px;
}

There are two events you can use to capture clicks: select and regionClick. select (as demonstrated by juvian) works when a user clicks on a region where there is data (UK, US, China, Brazil, in your example); regionClick fires when any region is clicked, even if it is not in your data set, and returns an object with a region property the holds the ISO code for the region:

google.visualization.events.addListener(chart, 'regionClick', function (e) {
    // e.region contains the ISO code for the clicked region
});

http://jsfiddle.net/asgallant/w5DYt/3/