Hide tooltip only when mouseup occurs

[alexooi]

Hi everyone, I have upgraded chart.js from 2.x to 3.4.1 for my Ionic app.

Currently, I am unable to show the tooltip when the mouse (pointer) leaves the canvas during mousemove. It only reappears when the mouse reenters the canvas. This happens after the version upgrade.

Is there anyway to keep the tooltip active even when the mouse leaves the canvas (as long as no mouseup occurred)? This is because the canvas is pretty small, and users should be able to see the tooltip as long as they press and move anywhere on the screen.

Any guides would be very much appreciated!

[kurkle]

You could filter the events passed to tooltip. For example:

options: {
  plugins: {
    tooltip: {
      events: ['mousedown', 'mousemove', 'mouseup'] 
    } 
  } 
} 

[alexooi]

Hi @kurkle,

Thanks for the reply! I have implemented the the following events according to your suggestion:

events: any[] = ['mousedown', 'mousemove', 'mouseup', 'mouseout', 'mouseleave', 'touchstart', 'touchmove', 'touchend'];
options.events = this.events;
options.plugins.tooltip.events = this.events;

However, the issue still persists (see attached video). This is because when holding and moving the pointer out of canvas, only the mousemove event is registered. I guess the objective here is to show the tooltip as long as mousemove happens, and hide it when mouseup happens. Appreciate your thoughts on how to achieve that.

tooltip.mp4

[kurkle]

Youd want to leave the mouseleave/mouseout out of the tooltip events.

[alexooi]

Unfortunately the tooltip is still not showing after removing mouseout/mouseleave from tooltip events, as only mousemove is recognised when user holds and moves the pointer outside the canvas. I am at a loss now. But thanks for the suggestion!