There are several choices available, take a look at the example charts provided below...
chart 0
To customize the tooltip text style, you can utilize the tooltip.textStyle configuration option. However, this option only allows for styling the text with specific attributes and does not support background customization.
color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean>
chart 1
Another method is to incorporate your own HTML/CSS by adding a tooltip column in the data.
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
You also need to set tooltip.isHtml: true in the options section.
For further details, refer to Customizing HTML content.
Examples...
google.charts.load('current', {
callback: function () {
// Define data table
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
// Chart 0 settings
new google.visualization.PieChart(document.getElementById('piechart0')).draw(data, {
title: 'chart 0',
tooltip: {
textStyle: {
color: 'deeppink',
fontName: 'Verdana',
fontSize: 16,
bold: true,
italic: true
}
}
});
// Constructing tooltip column
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
for (var i = 0; i < data.getNumberOfRows(); i++) {
data.setValue(i, 2,
'<div class="goog-tooltip"><div class="goog-tooltip-task">' +
data.getValue(i, 0) + '</div><div class="goog-tooltip-value">' +
data.getValue(i, 1) + '</div></div>'
);
}
// Chart 1 configuration
new google.visualization.PieChart(document.getElementById('piechart1')).draw(data, {
title: 'chart 1',
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
.goog-tooltip {
background-color: black;
padding: 6px 6px 6px 6px;
}
.goog-tooltip-task {
color: cyan;
font-size: 20px;
font-weight: normal;
}
.goog-tooltip-value {
color: gold;
font-size: 16px;
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart0"></div>
<div id="piechart1"></div>