Google Bubble Chart custom tooltip column does not

Question

I am trying to add a custom tooltip to a Bubble chart, to replace the default tooltip. I have followed the instructions from the docs site (here) to add a new string column to the DataTable, with role: 'tooltip'. However, you can see in the following JS fiddle example, that the custom tooltip content does not render. The chart still shows the default tooltip.

Anyone know what I still need to do to get this custom tooltip content to show up?

http://jsfiddle.net/MPBmY/2/

Answer 1

As stated at the bottom of the help document:

At this time, HTML tooltips are supported for the following chart types:

• AreaChart
• BarChart
• CandlestickChart
• ColumnChart
• ComboChart
• LineChart
• ScatterChart

Unfortunately, Bubble Charts are not covered and therefore you cannot add the custom html tooltips to them. You can write a custom javascript to create tooltips if you'd like, but you cannot use the existing functionality to do what you want to do.

Answer 2

I ended up making a custom tool-tip pop-up that is working pretty well.

Assuming your div for the bubble chart is defined like this:

<div id="bubble_chart_div"></div>

Then I used the JavaScript below. Please note that I left out that stuff about how to set up your google chart data and loading the google charts package. This code just shows how to get your custom toolip popup.

    var mouseX;
    var mouseY;
    $(document).mousemove( function(e) {
        mouseX = e.pageX; 
        mouseY = e.pageY;
    });

    /*
     *
     *instantiate and render the chart to the screen
     *
     */
    var bubble_chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart_div'));
    bubble_chart.draw(customer_product_grid_data_table, options);

    /*
     * These functions handle the custom tooltip display
     */
    function handler1(e){
        var x = mouseX;
        var y = mouseY - 130;
        var a = 1;
        var b = 2;
        $('#custom_tooltip').html('<div>Value of A is'+a+' and value of B is'+b+'</div>').css({'top':y,'left':x}).fadeIn('slow');
    }
    function handler2(e){
        $('#custom_tooltip').fadeOut('fast');
    }

    /*
     *  Attach the functions that handle the tool-tip pop-up
     *  handler1 is called when the mouse moves into the bubble, and handler 2 is called when mouse moves out of bubble
     */
    google.visualization.events.addListener(bubble_chart, 'onmouseover', handler1);
    google.visualization.events.addListener(bubble_chart, 'onmouseout', handler2);