Tooltips : Does not smooth while moving mouse / touch and on mobile tooltip does not disappeared when touch end

Expected Behavior

Bugs :

• Issue#A : It should be smooth when moving mouse (+ touch on mobile)
• Issue#B : It should disapreared tooltips when touch end (mobile) (or wait some secs before disapreared, possible while API ?)

Test / Demo : https://codepen.io/anon/pen/VWbBor

Current Behavior

• Issue#A : Tooltip is jumping (not smooth)
• Issue#B : Tooltip does not disappeared when touch end.

Possible Solution

• Issue#A : Add some delay ? debounce ?
• Issue#B : Add event onTouchEnd = Hide tooltip ?

Steps to Reproduce (for bugs)

Issue#A

1. Go to https://codepen.io/anon/pen/VWbBor
2. Move mouse between bars (Try both slowly and faster)
3. You will see tooltip is jumping

Issue#B

1. Go to https://codepen.io/anon/pen/VWbBor (on your mobile)
2. Touch or move on/to some bar
3. You will see tooltip does not disappeared when touch end.

Context

Config on options is :

options: {
    tooltips: {
      enabled: true,
      mode: 'index',
      intersect: false
    }
}

Environment

• Chart.js version: 2.6.0 Latest (https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js)
• Browser name and version: Test on both latest Chrome and Firefox on my MacOS
• Link to your project: https://codepen.io/anon/pen/VWbBor

[danegraphics]

Having tested this I’ve discovered that the problem for the jittery animation is when the tooltip settings are:

      mode: 'index',
      intersect: false

What happens is that when the mouse moves over the index, the tooltip begins to move. However, the moment the mouse hits the bar (if the tooltip is still moving), the tooltip restarts its animation from the beginning.

It looks like intersect: false probably isn’t being read properly (or at all) wherever the tooltip animation is triggered.

It also looks like the “current index” of the tooltip position doesn’t actually get changed until after the animation is complete, which, in my opinion, is not the correct order to do things in. In fact, this is probably the change that caused the problem and revealed that intersect: false doesn’t get checked in index mode.

NOTE: This also happens on line graphs. If you arrive at the index, the tooltip will move, then if you hit the circle for that data point while it’s moving, the tooltip will restart its movement just as it does in the bar graph.

ALSO NOTE: This issue was introduced by 2.6.0 and isn’t found in 2.5.0.

[chdsbd]

Okay, in my case adding the following fixed it,

options: {
  hover: {
    intersect: false
  }
}

Here is the updated example for issue A mentioned here: https://codepen.io/anon/pen/aVPewe