0👍
For those who have ended reached this same problem I would like to share my findings.
What ends up happening is the tooltip requires too much time for it to "disappear". There are different ‘transitions’, ‘animation’, or ‘animations’ that you can edit from the documentation, that will all do different things. I could not find out how to speed the "disappearing" up.
Instead, implement the example External tooltip that is given in the documentation for Chart.js. This tooltip, by default, does not have the same problems that the default tooltip has with appearing/disappearing.
Edit:
I would like to provide some things that I learned that may be useful for implementing the external tooltip.
- The example external tooltip is coded so that it uses the logic of the original tooltip. This can be good, however if you want the functionality of hovering over the legend and showing the tooltip, I would advise adding a ‘flag’ to that is true if you are hovering over a label, and false otherwise. This should be added as a check to show the tooltip.
- When you are setting active elements in the onHover of the legend and you have set ‘external’ to the externalTooltipHandler, you the externalTooltipHandler will automatically know to make items out of the active elements array. You should NOT call or pass the externalTooltipHandler, you should just set ‘external: externalTooltipHandler’
Let me know if I can clarify anything here, I have spent more time than I would like on this tooltip.
- Chartjs-Create IF to change chart.js bar color
- Chartjs-Where can I find breaking changes in chart.js in early versions?