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

Question

问题：如果您在Google地理标记中启用工具提示，则无法更改工具提示标题，这是您传递给Google图表绘制方法的第一列。

Answer 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.

Answer 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: