hightcharts: change standard position of tooltip AND shadow (hover)

Question

please have a look at this: http://jsfiddle.net/zb443xj9/

The bubble is drawed higher by the radius. Therefore method "drawPoints" is changed as followed (because this "changing feature" is not implemented in the framework):

    (function (H) {
    H.wrap(H.seriesTypes.bubble.prototype, 'drawPoints', function (p) {
        var series = this;
        H.each(series.points, function (point, i) {
            point.shapeArgs.y -= point.shapeArgs.r; //moved up by radius
        });

        p.call(this);
    });
})(Highcharts);

If you hover over the bubble you see, that the shadow and the tooltip still orientate on the "old" center . Does anybody know how the method for drawing the shadow and tooltip is named?

I'd love to overwrite these two methods as well. I hoped the are called something like "drawShadow" and "drawTooltip" but unfortunately not.

Thanks!

Answer 1

You should wrap haloPath method in point option. Then overwrite "this" object inside point.

H.wrap(H.Point.prototype, 'haloPath', function (proceed) {

                if(this.oldY === UNDEFINED) {
                    this.oldY = this.plotY;
                    this.plotY -= (this.shapeArgs.r);
                }

                return proceed.apply(this, 

Array.prototype.slice.call(arguments, 1));
});

H.wrap(H.Tooltip.prototype, 'getAnchor', function (proceed, points, mouseEvent) {
        var ret,
        chart = this.chart,
            inverted = chart.inverted,
            plotTop = chart.plotTop,
            plotLeft = chart.plotLeft,
            plotX = 0,
            plotY = 0,
            yAxis,
            xAxis;

        points = splat(points);

        // Pie uses a special tooltipPos
        ret = points[0].tooltipPos;

        // When tooltip follows mouse, relate the position to the mouse
        if (this.followPointer && mouseEvent) {
            if (mouseEvent.chartX === UNDEFINED) {
                mouseEvent = chart.pointer.normalize(mouseEvent);
            }
            ret = [
            mouseEvent.chartX - chart.plotLeft,
            mouseEvent.chartY - plotTop];
        }
        // When shared, use the average position
        if (!ret) {
            each(points, function (point) {
                yAxis = point.series.yAxis;
                xAxis = point.series.xAxis;
                plotX += point.plotX + (!inverted && xAxis ? xAxis.left - plotLeft : 0);
                plotY += (point.plotLow ? (point.plotLow + point.plotHigh) / 2 : point.plotY) + (!inverted && yAxis ? yAxis.top - plotTop : 0); // #1151
            });

            plotX /= points.length;
            plotY /= points.length;

            ret = [
            inverted ? chart.plotWidth - plotY : plotX,
            this.shared && !inverted && points.length > 1 && mouseEvent ? mouseEvent.chartY - plotTop : // place shared tooltip next to the mouse (#424)
            inverted ? chart.plotHeight - plotX : plotY];
        }

        if(points[0].oldY === UNDEFINED) {
            ret[1] -= points[0].shapeArgs.r;
        }

        return map(ret, mathRound);
    });

EDIT: Example: http://jsfiddle.net/zb443xj9/6/