How to Customize Google Visualization Geochart Tooltip

Question

I have the following for a Google Geochart (also available on JSFiddle Here )

What do I need to do to get rid of the extra spacing in the tool tip:

在此输入图像描述

<html>
    <head>
        <script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <script type='text/javascript'>
            google.load('visualization', '1', {'packages': ['geochart'],'callback': drawVisualization});

            function drawVisualization() {

                var data = new google.visualization.DataTable();
                data.addColumn('number', 'latitude');
                data.addColumn('number', 'longitude');
                data.addColumn('string', 'Country');
                data.addColumn('number', 'Fans');
                data.addColumn({type: 'string',role: 'tooltip'});
                data.addRow([14.38, -90.33, '', 229, 'Guatemala City!']);
                data.addRow([38.8339, -104.8214, '', 500, 'Colorado Springs!']);

                var options = {};
                var chart = new google.visualization.GeoChart(document.getElementById('my_chart'));
                chart.draw(data, options);

            };

        </script>
    </head>
    <body>
        <div id="my_chart" style="width: 100%; height: 100%;  "></div>
    </body>
</html>

Answer 1

its done

working fiddle

http://jsfiddle.net/maL943us/6/

 google.load('visualization', '1', {
        'packages': ['geochart'],
        'callback': drawVisualization
    });


        function drawVisualization() {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'latitude');
        data.addColumn('number', 'longitude');
        data.addColumn('string', 'Country');

        data.addColumn('number', 'Fans');
        data.addColumn({
            type: 'string',
            role: 'tooltip',
            'p': {'html': true}//added html version
        });
        data.addRow([14.38, -90.33, '', 229, 'Guatemala City!']);//added div tag with inline style
        data.addRow([38.8339, -104.8214, '', 500, '<div style="background-color:yellow;margin:0; padding:0;">Colorado Springs!</div>']);

        var options = {tooltip: {isHtml: true}};//added html version

        var chart = new google.visualization.GeoChart(document.getElementById('col_chart_html_tooltip'));
        chart.draw(data, options);

    };

html

<div id='col_chart_html_tooltip'></div>

CSS (overriding custom tooltip styles with !important )

.google-visualization-tooltip {
  border:solid 1px #000!important;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  font-size: 12px;
  padding: 0px;
    margin:0!important;
}
.google-visualization-tooltip-item-list {
  list-style-type: none;
  margin: 0!important;
  padding: 0!important;
}

.google-visualization-tooltip-item:first-child {
  margin: 0!important;
}
.google-visualization-tooltip-item {
  margin: 0!important;
  padding: 0!important;
}

How to Customize Google Visualization Geochart Tooltip

Question

1 answers

solution1
5 ACCPTED 2014-10-02 02:57:23

How to Customize Google Visualization Geochart Tooltip

Question

1 answers

solution1 5 ACCPTED 2014-10-02 02:57:23

solution1
5 ACCPTED 2014-10-02 02:57:23