[BUG] Tooltip hides when update is called

[pantonis]

[BUG] If I am over a slice in pie chart and I tooltip is visible when new data come in and update the chart, tooltip becomes hidden when it should not. I am using 2.7.1

Expected Behavior

Tooltip should not be hidden but instead updated with new values and stay visible.

Current Behavior

[BIf I am over a slice in pie chart and I tooltip is visible when new data come in and update the chart, tooltip becomes hidden or flashing.

Possible Solution

Steps to Reproduce (for bugs)

1. https://jsfiddle.net/pantonis/amgagdmq/19/

Context

This happens on all charts (pies, bars, radar etc..)

Environment

• Chart.js version: 2.7.1
• Browser name and version: Chrome
• Link to your project: N/A

[etimberg]

This is a result of #4840

I think the current behaviour is more correct, in my opinion, because it prevents a number of other issues. @benmccann @simonbrunel thoughts?

[pantonis]

The tooltip is flashing and is very very ugly.Very bad UX. I have seen several other libraries which just update the tooltip value. No hide and show again.I think desired behavior is straightforward. If the tooltip is visible it must update the new value and stay visible without hide and show with the new value.

[simonbrunel]

I think I agree with @pantonis, though I would hide the tooltip if the associated data/datasets are not anymore available (no dangling tooltip). We should add a way to programmatically hide the tooltip (maybe that's already the case), then users can easily hide tooltip after an update if desired. Currently, it doesn't seem possible (in a clean way) to prevent the tooltip to hide, which certainly goes against some UI/UX.

[pantonis]

@simonbrunel In a scenario where data are updated every 1 second and the tooltip is visible because the user wants to see a specific value shown on tooltip why would you hide it if the data/dataset are not available anymore? New data come in

[simonbrunel]

Agree, we could cache the last mouse/tap position, so when calling chart.update():

if tooltip visible {
  if data intersect {
    update toolip
  } else {
    hide tooltip
  }
}

[pantonis]

@simonbrunel kudos to you, you are my man. that is exactly what I mean!!

[pantonis]

Is there any timeline on when this is gonna be fixed?

[Evertvdw]

This is also an issue when having realtime charts, I add data to a chart every half a second and update te chart. If you then hover a point the tooltip dissappears every .5 seconds, which is really annoying as you hardly get a look at the tooltip.

Is there a current workaround to prevent this from happening? I'm looking at a plugin which redraws the tooltip after the update but no luck so far:

afterUpdate: function(chart) {
        if (chart.tooltip._active) {
            console.log('Should redraw tooltip');
            chart.tooltip.draw()
        }
}

Strange thing is that the tooltip._active object still contains the element on which the tooltip needs to be displayed after an update but it does not show. Can I do it manually somehow?

Thanks!

[yashcr07]

In my case the update doesn't get called when the mouse moves out of the chart, which doesn't set the tooltipModel.opacity to 0, so my tooltip continues to be displayed until i again hover on the chart and move my mouse out slowly.

This happenes only when i move the mouse pointer fast enough.

I'm using the custom tooltip option.

I couldn't reproduce this bug accurately as it only happens on the initial hover here. Just move the mouse really fast over the chart and you'll manage to get a tooltip which doesn't auto hide. if you fail to get the result, just reload the output window and try again.

[pantonis]

@yashcr07 It does not sound good to me a solution to move the mouse fast. I don't expect this to be passed as an instruction to end users. In any case I didn't even manage to make it work with moving the mouse really fast.
Below is a moving gif of the problem:

[yashcr07]

@pantonis that instruction was onlyfor trying to reproduce the bug. In my case it happens almost always, as you can see in the screenshot i posted in my previous comment.

It is very irritating because I have multiple line charts on a single screen, and if I'm moving my mouse across the screen, I hover over the tooltip, and it doesn't hide and I am left with multiple unhidden tooltips, which I can only hide by hovering over each chart and carefully moving my mouse out of the chart.

[pantonis]

@yanarchy This bug is about tooltip getting hidden. In your case it is always staying on. Maybe you should open another ticket.

[kumarharsh]

This bug is about tooltip getting hidden. In your case it is always staying on.

I think the root cause for both bugs is the same code path, introduced due to #4840.

[Evertvdw]

Is this planned to be implemented?

[pantonis]

6 months ago and still open :)

[benmccann]

You are welcome to send a PR :)

[pantonis]

@benmccann I don't have the javascript experience to work on it. I might cause more problems :)

[royvelich]

Does anyone work on it currently? I would love to try and fix it.. it is really annoying :-)

[Evertvdw]

This is just annoying me, simple solution: revert back to chart.js@2.7.0 there it works. I don't know why this receives no priority, I don't have the experience myself to do a PR, otherwise I would.

[Evertvdw]

Is there any update on this? I can't use the latest version of chart.js for quite a while now.

[Evertvdw]

Ok, I went ahead and made a PR (my first one ever). Can you take a look at it @benmccann or @simonbrunel ?

[simnovus]

Is there any update on this bug?

[Evertvdw]

@simnovus Yes, a fix was implemented and merged and is scheduled for a next release (3.0 I think). See #6635. When 3.0 will be released I don't know.

[muelsen]

@Evertvdw , is there any chance to have it in an intermediate release before 3.0? We are waiting for this fix since a couple of months and hoped that it will be part of 2.9.

[Evertvdw]

@muelsen I'm not the one in charge of that, maybe @etimberg or @simonbrunel can shed any light on that?

[benmccann]

All PRs are by default merged against master which will be part of the 3.0 release. I expect the final release of 3.0 to be quite aways away, but we will release alpha and beta versions before then.

For bug fixes only, after the PR is merged to master someone can submit the same PR to the 2.9 branch for it to be considered as a fix to be released sooner. At some point we will probably stop accepting bug fixes against 2.9 and focus purely on 3.0, but I'm not sure how far away that is. We're more likely to accept smaller bug fixes to 2.9 than things which change behavior in a larger way. This might be a little bit of a large change, so I'd also be curious as to what @etimberg and @kurkle would think about it

Note also that you can build your own version of Chart.js and use this fix immediately. That might be hard if you're using a package manager like npm, but I can advise you how to do it if you're including it via script tag since that would be easier than doing a PR and new 2.9 release

[muelsen]

@benmccann , Thanks! "Unfortunately" we're using npm as package manager...an own version of chartJS will not work. So I hope that this will be part of another 2.9.x. ;)

[pantonis]

@etimberg Thanks. When this is gonna be released?