Google Chart Gannt avoid tooltip - charts

Question

From a research, I got that the tooltip that appears on Gannt Google Chart is not customizable, so I decided to override it capturing the hover event triggered by my gannt's rectangles as follow:
google.visualization.events.addListener(chart, 'onmouseover', function (e) {
openTooltip(data, e.row);
});
But now the problem is that the default tooltip popup still opens, how can I disable the default tooltip? (chart options/ custom jquery)

Answer 1

there aren't any options to remove the default tooltip on a Gantt chart
the tooltip is drawn using svg elements, which are added dynamically when you hover a bar
we can use a MutationObserver to know when the tooltip has been added
we can't remove the tooltip because it will break the chart
but we can make it invisible / all the elements transparent
see following working snippet...
google.charts.load('current', {
packages:['gantt']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.Gantt(container);
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
var observer = new MutationObserver(function (nodes) {
Array.prototype.forEach.call(nodes, function(node) {
if (node.addedNodes.length > 0) {
Array.prototype.forEach.call(node.addedNodes, function(addedNode) {
if ((addedNode.tagName === 'rect') && (addedNode.getAttribute('fill') === 'white')) {
addedNode.setAttribute('fill', 'transparent');
addedNode.setAttribute('stroke', 'transparent');
Array.prototype.forEach.call(addedNode.parentNode.getElementsByTagName('text'), function(label) {
label.setAttribute('fill', 'transparent');
});
}
});
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(data, options);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>