Allow the tooltip to appear when a point is clicked (instead of hover).
Tool tip only appears when a point is clicked rather than hover. The tool tip would persist until another point is clicked or if the user clicks anywhere on the chart.
Here’s a small drop-in snippets that stops tooltips from the mousemove event, and applies them to the click instead. Touch devices should be unaltered.
-
webpig commented
How to do on mobile?
-
Terry Aney commented
Similar to Matt, when shared tooltips are enabled, it fails. I'm not 100% sure if I need that or not, so I put a breakpoint in the highcharts refresh method and manually set shared=false to test. However, I have a custom tooltip formatter. Inside the formatter, I use this.points to enumerate the points, but when I use your code, this.points is undefined when the formatter function is called from the refresh method.
Any ideas?
-
It works for me in Chrome - which browser are you using?
-
Fangzhou He commented
Torstein, thanks for the help but your jsfiddle doesn't work for me as well :)
-
Matt commented
Torstein, thanks for the help but your jsfiddle doesn't work :)
-
To work around that you can pass [e.point] to the refresh function, though it doesn't actually make the tooltip shared. It still relates only to the clicked point. http://jsfiddle.net/highcharts/8VTTH/29/
-
Matt commented
The example linked fails when shared tooltip is enabled.
-
Ananomous commented
Highchart-ng tooltip click not working
-
Thanks for reporting, I added a simple check for e's existance.
-
Rohan commented
Torstein,
Your jsfiddle works great. But If I have zoom functionality then i get type undefined error.
Please check this jsfiddle. -
Rohan commented
In Highchart when I try to mouse hover on any point tooltip and if there is an adjacent point close to that tooltip then tooltip changes and shows data for that adjacent point. How can i make tooltip not change unless my mouse is out of that tooltip? in other words until my mouse is on that tooltip it should show data for that point only.
See this ex- http://jsfiddle.net/gh/get/jquery/1.9.1 ... ine-basic/
If i click on first point of Tokyo series, tooltip shows Jan Tokyo 7c, When you try to move your mouse to 7c then it overlaps with next point and tooltip shows data for next point. I would like to avoid that unless i specifically go to that next point or mouse is out of tooltip area.
Thanks
-
Dennis Monsewicz commented
Anyway this could be done on a pie chart?
-
Jamie commented
I have started using a technique as answered here:
http://stackoverflow.com/questions/16946044/highcharts-tooltip-click-instead-of-hoverI either disable the tooltip, or I display a limited, fixed position tooltip.
Then I use the jQuery UI Dialog, fired by a click event on the point, to show a 'full' tooltip. As noted in the first link, Highslide html popups work well for this purpose also.
Example with jQuery UI Dialog method:
-
Jamie commented
this is a very common question...are there any tips on implementing this ourselves?