In particular, is there a way to only trigger hover tips if we are NOT intersecting an element?
More background:
Trying to work out some touch screen compatibility issues. We have a custom onclick listener that renders a popup if we click on a data point; we also have a custom tooltip we render when we hover over the chart with intersect
set to false
currently. The issue is, on touch screens, if I click on a data point, both the tooltip and the popup shows up. I can use z-index and / or javascript in the onclick-listener to hide the tooltip, but both methods entail a slight delay: that is, the tooltip first shows for a split second, and then it's hidden. Is there any way to make this behave more elegantly? Thanks!
Edit: Sorry for not being clear enough - this is particularly a question about Chart.js (v2), and to include some example:
const chartEl= document.getElementById('chartEl').getContext('2d');
[#chartEl is a canvas element: <canvas id="chartEl"></canvas>]
const justAChart = new Chart(chartEl,
{
data: {
datasets: someDataSet,
},
type: 'line',
responsive: true,
options: {
hover: {
mode: 'index',
intersect: false
},
tooltips: {
mode: 'index',
intersect: false,
// custom tooltip rendering
custom: someCustomTooltip,
}
}
};
);
// Onclick listener for popup when clicking on a datapoint
document.getElementById("chartEl").onclick = function(evt){
let points = justAChart.getElementsAtEventForMode(evt, 'point', justAChart.options);
if (points .length > 0) {
showThePopup()
}
}
stopPropagation
or useCapture?:hover
rules? Is it a JavaScript hover event? Et cetera... Perhaps you could add a Minimal, Reproducible Example that shows how your code works, to eliminate the guesswork?