Question

I have a url link in the tooltip, however, if the tooltip goes outside of the chart area and you try to click on the url, the tooltip disappears.

Any work-arounds for this?

Thanks!

Answer 1

I’ve found in cases like these, it’s best to position the tooltip manually:

http://api.highcharts.com/highcharts#tooltip.positioner

That way, unwanted hiding is controllable.

EDIT:

If you extend the tooltip prototype, you can manipulate the X and Y

Tooltip.prototype.move = function (x, y, anchorX, anchorY) {
    var tooltip = this,
        now = tooltip.now,
        animate = tooltip.options.animation !== false && !tooltip.isHidden;

            if(x > ?????)
            {
               x = x - 50; // or how ever many pixels you want to move it to
            }

    // get intermediate values for animation
    extend(now, {
        x: animate ? (2 * now.x + x) / 3 : x,
        y: animate ? (now.y + y) / 2 : y,
        anchorX: animate ? (2 * now.anchorX + anchorX) / 3 : anchorX,
        anchorY: animate ? (now.anchorY + anchorY) / 2 : anchorY
    });

    // move to the intermediate value
    tooltip.label.attr(now);


    // run on next tick of the mouse tracker
    if (animate && (mathAbs(x - now.x) > 1 || mathAbs(y - now.y) > 1)) {

        // never allow two timeouts
        clearTimeout(this.tooltipTimeout);

        // set the fixed interval ticking for the smooth tooltip
        this.tooltipTimeout = setTimeout(function () {
            // The interval function may still be running during destroy, so check that the chart is really there before calling.
            if (tooltip) {
                tooltip.move(x, y, anchorX, anchorY);
            }
        }, 32);

    }
}