Programmatically open and close Chart.js tooltip
I would be careful accessing/modifying private variables that begin with _
. You may find yourself with unexpected behavior. Why not trigger the canvas mousemove
event
function openToolTip (myChart, index) {
var mouseMoveEvent, meta, point, rectangle, value;
meta = myChart.getDatasetMeta(0);
rectangle = myChart.canvas.getBoundingClientRect();
point = meta.data[index].getCenterPoint();
mouseMoveEvent = new MouseEvent('mousemove', {
clientX: rectangle.left + point.x,
clientY: rectangle.top + point.y
});
myChart.canvas.dispatchEvent(mouseMoveEvent);
},
To close the tooltip just trigger the mouseout
event
function closeToolTip (myChart) {
var mouseOutEvent = new MouseEvent('mouseout');
return myChart.canvas.dispatchEvent(mouseOutEvent);
}
The code below will handle one or more tooltips.
function openTip(oChart,datasetIndex,pointIndex){
if(window.oChart.tooltip._active == undefined)
window.oChart.tooltip._active = []
var activeElements = window.oChart.tooltip._active;
var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex];
for(var i = 0; i < activeElements.length; i++) {
if(requestedElem._index == activeElements[i]._index)
return;
}
activeElements.push(requestedElem);
//window.oChart.tooltip._view.body = window.oChart.getDatasetMeta(datasetIndex).data;
window.oChart.tooltip._active = activeElements;
window.oChart.tooltip.update(true);
window.oChart.draw();
}
function closeTip(oChart,datasetIndex,pointIndex){
var activeElements = window.oChart.tooltip._active;
if(activeElements == undefined || activeElements.length == 0)
return;
var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex];
for(var i = 0; i < activeElements.length; i++) {
if(requestedElem._index == activeElements[i]._index) {
activeElements.splice(i, 1);
break;
}
}
window.oChart.tooltip._active = activeElements;
window.oChart.tooltip.update(true);
window.oChart.draw();
}
Complete solution provided by @BeetleJuice - https://jsfiddle.net/ucvvvnm4/5/