When you disable the tooltip.animation
property, you have the option to calculate the anchorY
within the updatePosition
method like this:
(function(H) {
H.wrap(H.Tooltip.prototype, 'updatePosition', function(proceed, point) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
this.label.attr({
anchorY: point.plotY + point.h / 2 + this.chart.plotTop
});
});
}(Highcharts));
Check out the live demo here: http://jsfiddle.net/BlackLabel/91tfrL45/
If you want the animation enabled, you will need to override the method as shown below:
Highcharts.Tooltip.prototype.updatePosition = function(point) {
var chart = this.chart,
label = this.getLabel(),
pos = (this.options.positioner || this.getPosition).call(
this,
label.width,
label.height,
point
),
anchorX = point.plotX + chart.plotLeft,
anchorY = point.plotY + point.h / 2 + chart.plotTop,
pad;
// Dynamically set the renderer size to prevent changes in document size
if (this.outside) {
pad = (this.options.borderWidth || 0) + 2 * this.distance;
this.renderer.setSize(
label.width + pad,
label.height + pad,
false
);
anchorX += chart.pointer.chartPosition.left - pos.x;
anchorY += chart.pointer.chartPosition.top - pos.y;
}
// Move the tooltip
this.move(
Math.round(pos.x),
Math.round(pos.y || 0), // May be undefined (#3977)
anchorX,
anchorY
);
}
Check out the live demo here: http://jsfiddle.net/BlackLabel/w1qomy0x/
For more information, refer to the API Reference: https://api.highcharts.com/highcharts/tooltip.animation
Explore the documentation further: https://www.highcharts.com/docs/extending-highcharts