How to hide tooltip title in google geocharts (and show other info in the tooltip)

问题

Problem: if you enable the tooltips in google geocharts you cannot change the tooltip title, it's the first column you pass to the google chart draw method.

回答1:

Instead of the CSS above to hide the title, you can set the showTitle option for the tooltip to false

tooltip: {
        isHtml: true,
        showTitle: false
    }

Then you can use HTML markup in your tooltip to display the tooltip exactly the way you want.

回答2:

In google geocharts if you enable the tooltip visualization, the title will be the first column of the data you passed to the google geochart.draw function.

In my case for performance consideration I found better to pass to google the ISO3166 nation 2 character code, it's resolved immediately, if you use the extended name it's not recognized immediately and it left some grey areas for some seconds.

Unfortunately after this choice, the tooltip title shows the 2 letter nation iso code, but I need to show another title.

I created a json array built this way:

var arCustomersDataByNation = [['Country', 'MyNumericData','Tooltip'],['RU',4,'My beautiful tooltip'],['AE',3,'NewTooltipTitle3'],['AF',1,'NewTooltipTitle4']...];

Added the data to a google dataTable :

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Country');
    data.addColumn('number', 'MyNumericData');
    data.addColumn({type:'string', role:'tooltip'});

    for(var i = 1; i < arCustomersDataByNation.length; i++){
        data.addRows([[arCustomersDataByNation[i][0],arCustomersDataByNation[i][1],arCustomersDataByNation[i][2]]]);
    }

and defined the google chart options, the "isHtml: true" option is fundamental, is the only way to hack via CSS the geochart tooltip:

var arSubCColors = ['#ffffff','#99E6FF','#70DBFF','#1FC7FF','#00B4F1'];
var zoom_0_options = {
    backgroundColor: {fill:'#f2f2f2',stroke:'#FFFFFF' ,strokeWidth:0 },
    colorAxis:  {minValue:0,maxValue:4,colors: arSubCColors},
    datalessRegionColor: '#ccc',
    displayMode: 'regions',
    enableRegionInteractivity: 'true',
    keepAspectRatio: true,
    legend: 'none',
    region:'world',
    resolution: 'countries',
    sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
    tooltip : {textStyle: {color: '#666'}, showColorCode: true, isHtml: true}
};

Afyter this some CSS, the ".google-visualization-tooltip-item:first-child" rule hides the bold default title:

.google-visualization-tooltip{
        border: 0px!important;
        height : 30px!important;
        list-style: none!important;
    }
    .google-visualization-tooltip-item
    {
        list-style: none!important;
        position: relative;
        top: -3px;
        color: #707173!important;
        font-weight: bold!important;
    }
    .google-visualization-tooltip-item-list .google-visualization-tooltip-item:first-child 
    {
        display: none; 
    }

And here is the result:

enter image description here