Geochart HTML Tooltip

HTML

<script src="//www.google.com/jsapi"></script>
<div id="visualization"></div>

CSS

/* This is the main tooltip class. It's the tooltip wrapper div */
div.google-visualization-tooltip {
	margin: 0;
	padding: 5px 0px 0px 5px;
    color:#444;
    background:none;
    border:none;
    box-shadow:none;
}

.google-visualization-tooltip ul, .google-visualization-tooltip li, .google-visualization-tooltip img {
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  outline: 0;
  font-size: 100%;
  line-height: 1.5em;
  text-decoration: none;
  vertical-align: baseline;
  list-style: none;
}

/*The content of the tooltip is rendered by the API in an unordered list 
With 2 li entries, one for the title and other for the actual tooltip info.
*/
ul.google-visualization-tooltip-item-list {
	list-style: none;
	margin:0;
	padding:0;
}

li.google-visualization-tooltip-item {
	list-style: none;
	margin:0;
	padding:0;
}

.google-visualization-tooltip-item * {
	margin:0;
	padding:0;
  list-style: none;
}

/* This rule controls the Title info */
.google-visualization-tooltip-item-list
.google-visualization-tooltip-item:first-child {
  list-style: none;
  display:inline-flex;
  margin:0;
	padding:0;
}

JavaScript

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

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Value', {role: 'tooltip', p:{html:true}}],
        ['Russia', 5, 'Hello world'],
        [{v:'US',f:''}, 20, 'Testing']]);
    var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
    chart.draw(data, {
        width: 800,
        height: 400,
        legend: 'none',	
        projection: 'kavrayskiy-vii',
        tooltip: {
            isHtml: true
        }
    });
}