1

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()
      }
    }
2
  • would this be a matter of stopPropagation or useCapture?
    – Sheraff
    Commented Jun 24, 2020 at 22:41
  • There are a lot of ways that the hover you're talking about could be happening. Is it using CSS :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?
    – David784
    Commented Jun 24, 2020 at 22:46

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.