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

[l2aelba]

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.

[etimberg]

Thanks for the investigation @danegraphics. Not sure what changed in 2.6 but it sounds like the fix is only to retrigger the animation if the index changes in index mode.

[himynameisubik]

Is there an update for clearing/hiding tooltips after touchEnd?

[himynameisubik]

@l2aelba Adding the event "touchend" to the options like this, removes the tooltip after touchend.
events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]

This was changed here: https://github.com/chartjs/Chart.js/pull/1644/files

[chdsbd]

Has anyone found a workaround for this? I've just ran into this issue.

[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

[StefanRein]

Still did not work always for me.

I started to remove the tooltip after one second.

this.chart = new Chart(this.canvas.nativeElement, {CONFIG});

// CONFIG:
{
    type: 'line',
    options: {
        events: ['mousemove', 'mouseout', 'touchmove', 'touchend'],
        animation: {
            duration: 0
        },
        hover: {
            animationDuration: 0, // duration of animations when hovering an item
            intersect: false
        },
        tooltips: {
            mode: 'index',
            intersect: false,
            enabled: true,
            callbacks: {
                label: (tooltipItem: ChartTooltipItem) => {
                    // ...
                    clearTimeout(this.updateToolTipTimeout);
                    this.updateToolTipTimeout = window.setTimeout(() => this.chart.update(), 1000);
                    // ...
                }
            }
        }
    }
}

[kurkle]

Seems like both issues are resolved?
Tooltip is smooth in 2.9.3 (latest) and master:
latest
master

And at least master with touchend added to events (in that pen) hides the tooltip appropriately (tested with android).

[kurkle]

I'm closing this as resolved, feel free to reopen if one of the issues still exist.