Tooltip on mobile should go away when I tap outside of canvas

[lessless]

Expected Behavior

When I tap outside of a canvas tooltip should disappear, akin to what happens when I tap inside a canvas. Or similarly to what happens on the desktop when I move mouse away from a circle.

Current Behavior

Tooltip stays visible when I tap outside of a canvas

Steps to Reproduce

Navigate to any tooltip example on mobile phone and tap on any data point. You will see a tooltip. Then tap outside of canvas and you will see that tooltip stays on a screen.

Context

It's expected that tooltips and hints are transient elements and they go away as soon as user leaves the context when they appeared.

Environment

• Chart.js version: 2.9.3
• Browser name and version: Safari on iOS 3.6.1 and Firefox Mobile 28.0
• Link to your project: https://www.chartjs.org/samples/latest/tooltips/custom-line.html

[kurkle]

Does that happen in master too? (https://www.chartjs.org/samples/master/tooltips/custom-line.html) Works fine with android/chrome.

[lessless]

@kurkle works as expected in Chrome. Even latest.

[ermish]

I was able to reproduce this on iOS Safari. This works on safari desktop, and other browsers.

I'll work on making a PR for this 👍

[kurkle]

@Ermish any progress?

[etimberg]

Is this still an issue with Safari?

[kurkle]

I could actually reproduce this with FF 93 in emulation mode:

[kurkle]

I could not find a event that FF on mobile emulation would fire on the canvas when tapping outside it. So as a workaround, one would need something like this:

if (event.target.tagName !== 'CANVAS') {
  const out = new Event('mouseout');
  for (const id of Object.keys(Chart.instances)) {
    Chart.instances[id].canvas.dispatchEvent(out);
  }
}

Note: FF on Android mobile does not need a workaround. So I'm not quite sure which devices actually need it.

[pacastro]

I'm having this issue in an iPhone 12 in a line chart when using options.interaction with intersect: 'false' and mode: 'index', can reproduce with Chrome in emulation mode for any kind of mobile device (no problem in desktop mode). Tooltip won't go away, only way is refreshing the page.

With intersect 'true' or using any other mode works ok, tooltip goes away when clicking outside of canvas. Only with 'index' in combination with intersect: 'false' tooltip won't go away.

[arjen-n]

I had this issue on iPhone 14 (Chrome and Safari) with my angular application.

chartjs version: 4.2.1 Angular version: 15.2.0

As far as i can see the only time when this behavior occurs is when you set the options.interaction.intersect on false and the options.interaction.mode on 'index' (like @pacastro mentioned).

I created a workaround for my angular application by using the example @kurkle provided. For me, the touchend gesture served as the best event to hide the tooltip.

Angular workaround:

@HostListener('document:touchend', ['$event.target'])
hideTooltip(target: HTMLElement): void {
  if (target.tagName.toLowerCase() !== "canvas") {
    this._chart.canvas.dispatchEvent(new Event('mouseout'));
  }
}

Plain JavaScript workaround:

document.addEventListener('touchend', function (event) {
  if (event.target && event.target.tagName.toLowerCase() !== "canvas") {
    CHART_INSTANCE.canvas.dispatchEvent(new Event('mouseout'));
  }
});