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.

(function (H) {
    H.wrap(H.Tooltip.prototype, 'hide', function (defaultCallback) {
        /*
            ░░░░░▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄▄▄░░░░░░░
            ░░░░░█░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░▀▀▄░░░░
            ░░░░█░░░▒▒▒▒▒▒░░░░░░░░▒▒▒░░█░░░
            ░░░█░░░░░░▄██▀▄▄░░░░░▄▄▄░░░░█░░
            ░▄▀▒▄▄▄▒░█▀▀▀▀▄▄█░░░██▄▄█░░░░█░
            █░▒█▒▄░▀▄▄▄▀░░░░░░░░█░░░▒▒▒▒▒░█
            █░▒█░█▀▄▄░░░░░█▀░░░░▀▄░░▄▀▀▀▄▒█
            ░█░▀▄░█▄░█▀▄▄░▀░▀▀░▄▄▀░░░░█░░█░
            ░░█░░░▀▄▀█▄▄░█▀▀▀▄▄▄▄▀▀█▀██░█░░
            ░░░█░░░░██░░▀█▄▄▄█▄▄█▄████░█░░░
            ░░░░█░░░░▀▀▄░█░░░█░█▀██████░█░░
            ░░░░░▀▄░░░░░▀▀▄▄▄█▄█▄█▄█▄▀░░█░░
            ░░░░░░░▀▄▄░▒▒▒▒░░░░░░░░░░▒░░░█░
            ░░░░░░░░░░▀▀▄▄░▒▒▒▒▒▒▒▒▒▒░░░░█░
            ░░░░░░░░░░░░░░▀▄▄▄▄▄░░░░░░░░█░░
            */
    });
}(Highcharts));

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

(function (H) {
    H.wrap(H.Tooltip.prototype, 'hide', function () {});
}(Highcharts));

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.

(function (H) {
        H.wrap(H.Tooltip.prototype, 'hide', function (defaultCallback) {
            // Pre Processing
            if (/* .. */) {
                //Do Nothing (Do Not Hide)
            } else { // Call the default Hide Callback
                defaultCallback.apply(this);
            }
            // Post Processing
        });
    }(Highcharts));

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.

chart.tooltip.refresh(chart.series[1].points[2]);
// If the tooltip.shared=true, the parameter is an array of points
chart.tooltip.refresh([chart.series[1].points[2]]);

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

• Never want to hide tooltip on highcharts @ StackOverflow
• Show HighCharts tooltip when chart loads @ StackOverflow
• Customizing Tooltip Visibility @ jsFiddle
• Always Visible Tooltip @ jsFiddle
• Show Tooltip On Load @ jsFiddle
• Customizing Highcharts – Tooltip Positioning
• Extending Highcharts

The Highcharts API Reference for tooltip.positioner reads

However, positioner is much more than just the default position of the tooltip. It takes the following syntax

tooltip:{
    positioner:function(labelWidth, labelHeight, point){
        var tooltipX,tooltipY;
        // ... Calculations go here ... //
        return { x : tooltipX, y : tooltipY };
    }
}

Note the three arguments labelWidth, labelHeight & point at your disposal, these seem to be sufficient for most of the use cases to calculate a desired tooltip position. labelWidth and labelHeight are the width and height that your tooltip requires, hence you can use them for edge cases to adjust your tooltip and prevent it from spilling out of the chart or even worse getting clipped. Let us see an example of positioning the tooltip to the right of the point.

positioner: function (labelWidth, labelHeight, point) {
    var tooltipX, tooltipY;
    tooltipX = point.plotX + chart.plotLeft + 20;
    tooltipY = point.plotY + chart.plotTop - 20;
    return {
        x: tooltipX,
        y: tooltipY
    };
}

Keen eyes would have noticed a problem while hovering over the December points, the tooltip goes outside the chart area. Let’s fix this using the labelWidth, this tells us how much space would the tooltip need. Using the labelWidth along side pointX we can find the far right of the tooltip and compare that with the plot’s width, if it goes outta bounds, we position the tooltip to the left instead. Try fiddling with the rightmost points on the series.

positioner: function (labelWidth, labelHeight, point) {
    var tooltipX, tooltipY;
    if (point.plotX + labelWidth > chart.plotWidth) {
        tooltipX = point.plotX + chart.plotLeft - labelWidth - 20;
    } else {
        tooltipX = point.plotX + chart.plotLeft + 20;
    }
    tooltipY = point.plotY + chart.plotTop - 20;
    return {
        x: tooltipX,
        y: tooltipY
    };
}

Sometimes, all we may want is a static location for the tooltip, like one of the corners of the chart. At the same time, we might not want the tooltip to eclipse any datapoints. We could simply assign the bottom left corner (chart.plotLeft,chart.plotTop + chart.plotHeight – labelHeight) as the tooltip’s position, and make use of the all the three parameters to determine if the current point falls behind the tooltip’s default location, if so, move the tooltip to the top right of the point. Hover over any point and observe the tooltip stays at the corner, now hover over the point at the bottom left and see the tooltip give way to the point.

positioner: function (labelWidth, labelHeight, point) {
    var tooltipX, tooltipY;
    if (point.plotX + chart.plotLeft < labelWidth && point.plotY + labelHeight > chart.plotHeight) {
        tooltipX = chart.plotLeft;
        tooltipY = chart.plotTop + chart.plotHeight - 2 * labelHeight - 10;
    } else {
        tooltipX = chart.plotLeft;
        tooltipY = chart.plotTop + chart.plotHeight - labelHeight;
    }
    return {
        x: tooltipX,
        y: tooltipY
    };
}

For further reading, the default tooltip positioner that comes with highcharts is interesting. One should be able to adapt this to the appropriate requirement (Source).

/**
 * Place the tooltip in a chart without spilling over
 * and not covering the point it self.
 */
getPosition: function (boxWidth, boxHeight, point) {

    var chart = this.chart,
        distance = this.distance,
        ret = {},
        swapped,
        first = ['y', chart.chartHeight, boxHeight, point.plotY + chart.plotTop],
        second = ['x', chart.chartWidth, boxWidth, point.plotX + chart.plotLeft],
        // The far side is right or bottom
        preferFarSide = point.ttBelow || (chart.inverted && !point.negative) || (!chart.inverted && point.negative),
        /**
         * Handle the preferred dimension. When the preferred dimension is tooltip
         * on top or bottom of the point, it will look for space there.
         */
        firstDimension = function (dim, outerSize, innerSize, point) {
            var roomLeft = innerSize < point - distance,
                roomRight = point + distance + innerSize < outerSize,
                alignedLeft = point - distance - innerSize,
                alignedRight = point + distance;

            if (preferFarSide && roomRight) {
                ret[dim] = alignedRight;
            } else if (!preferFarSide && roomLeft) {
                ret[dim] = alignedLeft;
            } else if (roomLeft) {
                ret[dim] = alignedLeft;
            } else if (roomRight) {
                ret[dim] = alignedRight;
            } else {
                return false;
            }
        },
        /**
         * Handle the secondary dimension. If the preferred dimension is tooltip
         * on top or bottom of the point, the second dimension is to align the tooltip
         * above the point, trying to align center but allowing left or right
         * align within the chart box.
         */
        secondDimension = function (dim, outerSize, innerSize, point) {
            // Too close to the edge, return false and swap dimensions
            if (point < distance || point > outerSize - distance) {
                return false;

                // Align left/top
            } else if (point < innerSize / 2) {                 ret[dim] = 1;                 // Align right/bottom             } else if (point > outerSize - innerSize / 2) {
                ret[dim] = outerSize - innerSize - 2;
                // Align center
            } else {
                ret[dim] = point - innerSize / 2;
            }
        },
        /**
         * Swap the dimensions 
         */
        swap = function (count) {
            var temp = first;
            first = second;
            second = temp;
            swapped = count;
        },
        run = function () {
            if (firstDimension.apply(0, first) !== false) {
                if (secondDimension.apply(0, second) === false && !swapped) {
                    swap(true);
                    run();
                }
            } else if (!swapped) {
                swap(true);
                run();
            } else {
                ret.x = ret.y = 0;
            }
        };

    // Under these conditions, prefer the tooltip on the side of the point
    if (chart.inverted || this.len > 1) {
        swap();
    }
    run();

    return ret;

}

Read further about customizing the visibility of the tooltip @ Customizing Highcharts – Tooltip Visibility

Reference Links

• Highcharts tooltip always on right side of cursor @ Stack Overflow
• Highcharts’ Source
• Highcharts API Reference
• jsFiddle – Tooltip Always on Right
• jsFiddle – Tooltip Always on Right, with boundary fix
• jsFiddle – Tooltip at Bottom Left
• Customizing Highcharts – Tooltip Visibility