JSFiddle - React, Tailwind, and code Playground

by muris2016

HTML

<script src="http://www.google.com/jsapi"></script>
<div id='col_chart_html_tooltip'></div>

CSS

.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;
}

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',
    'p': {
      'html': true
    }
  });
  data.addRow([14.38, -90.33, '', 229, 'Guatemala City!']);
  data.addRow([38.8339, -104.8214, '', 500, '<div style="background-color:yellow; margin:0; padding:0;">Colorado Springs!</div>']);

  var options = {
    tooltip: {
      isHtml: true
    }
  };

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

};