Customizing Highcharts – Tooltip Visibility

Let’s play around with the Highcharts tooltip some more. Last time we saw how to customize the position of the Highcharts tooltip, today we shall look at how to work around the visibility of the tooltip.

The outcome of this exercise would be

The default behavior of the tooltip is to show up when the user hovers over a point, the tooltip then stays visible as long as the user is still interacting with the points on the chart. The tooltip fades out with a delay after the user moves outside the chart area. Let’s see how to prevent this fading out and always have the tooltip persist on the chart area even after the mouse has moved outside the chart area.

In the process, we shall also learn about Extending Highcharts. Let’s extend the Highcharts.Tooltip class using the very convenient Highcharts.wrap method.

JavaScript with its dynamic nature is extremely powerful when it comes to altering the behaviour of scripts on the fly. In Highcharts we created a utility called wrap, which wraps an existing prototype function (“method”) and allows you to add your own code before or after it.

The wrap function accepts the parent object as the first argument, the name of the function to wrap as the second, and a callback replacement function as the third. The original function is passed as the first argument to the replacement function, and original arguments follow after that.

Let’s get wrapping. We will create a quick Highcharts plugin that overrides the Highcharts.Tooltip.prototype.hide behavior. We want the tooltip to persist, in other words we don’t want the tooltip to hide. Let’s override the hide method with a no-op method.

For the minimalists, the following code also does the exact same thing

Although, we have completely removed the hide functionality in the above example, we sometimes may want this to happen conditionally. The wrap method provides the original method as the first parameter too and we could use it for pre-processing, post-processing, conditional processing, etc.

If you noticed the demo carefully, you see the tooltip does persist but the tooltip does not come up till the user hovers over the chart once. We may want to force the showing of tooltip on load, let us see how to accomplish that.

The tooltip object has a refresh method on it, this method takes the points on which the tooltip shall show up. In case of a shared tooltip this argument would be an array, otherwise the method takes a single point as the argument. Following code would bring up the tooltip on the 3rd point on the 2nd series.

Invoking the above immediately after the chart instantiation shall show the tooltip on load, and clubbing with the previous plugin we shall have an ever persisting tooltip.

Here is the example we began with and see what can be accomplished by combining the techniques together

Reference Links

Jugal Thakkar

Jugal Thakkar is a C# professional, JavaScript expert and an Android fan boy. He forges user-friendly enterprise web applications and enjoys data crunching & visualization. He is passionate about mobile and web technologies & appreciates open source.

He has been a preacher of Highcharts since he got acquainted with it at work & now attempts to help developers on Stack Overflow with his little knowledge. He occasionally blogs about Highcharts & has been a reviewer of the Highcharts Cookbook recently.

Jugal relishes playing Ping-Pong, solving puzzles or trying his luck at a Bowling alley. To know of what he learns, experiments and explores visit http://jugal.me/ or follow his blog, A Humble Opinion, @ http://ahumbleopinion.com/

Latest posts by Jugal Thakkar (see all)

  • Tim

    Thanks for the post! It helped me make a chart with a ‘sticky’ tooltip which will always show the last data point (in my project’s case this was the current day), I forked your jsfiddle for an example – http://jsfiddle.net/tim545/foqLem0p/

    • http://jugal.me/ Jugal Thakkar

      You’re welcome Tim! Thanks for the fiddle, it’s always interesting to know what people do with Tooltips

  • Андрей Филипенков

    Seems to me this solution introduces a bug:

    1. Hover over the rightmost point on the blue plot line: tooltip is visible, plotline and point are both highlighted – OK
    2. Move your mouse to the right out of the plot area: tooltip stays visible, plotline and point are not highlighted – OK
    3. Move the mouse to the left and hover over the point: plotline is highlighted, but point is not. Point is even not clickable. – NOT OK
    4. To make the point responsible again we should hover over another point or reload the page

    Ubuntu, latest google chrome browser or chromium.

    • http://jugal.me/ Jugal Thakkar

      Interesting find and thanks for the feedback. I will see how we can fix this.

  • Jhen Pazmino

    Hello, how can i show all the tooltips when loading highcharts, get them to show to execute the load event but they are not shown in the corresponding column

    http://jsfiddle.net/JhenP/489j7nxm/72/

  • Daniel Walker

    This is good stuff! I have been trying to find a solution for a map chart where you hover over a point and the tooltip stays open because it has data and links that the user might want to click. The tooltip does not hide/close until the mouse leaves the hovered tooltip or the user clicks (not hovers) somewhere else. I tried several suggestions but none seem to work…thoughts???