Google Bubble Chart custom tooltip column does not render

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/

jeffery_the_wind jeffery_the_wind · Accepted Answer · 2013-01-31T14:18:07

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);

Google Bubble Chart custom tooltip column does not render

2 Answers