highcharts - カスタム オブジェクト (renderer.circle) のハイチャート ツールチップ

Question

カスタムオブジェクトにツールチップを配置する方法を見つけようとしています。特に円 (render.circle) では。

ここで例を見つけましたが、クロスブラウザーではないようです (IE 9 以降と Firefox では動作しません)。

何か案は？

$(function () { var isTouch = 'ontouchstart' in document.documentElement;

var renderer = new Highcharts.Renderer(
    $('#container')[0], 
    400,
    300
);

var tooltipOptions = Highcharts.getOptions().tooltip;

var tooltip = new Highcharts.Tooltip({
        renderer: renderer,
        plotLeft: renderer.box.clientLeft,
        plotTop: renderer.box.clientTop,
        plotWidth: renderer.box.clientWidth,
        plotHeight: renderer.box.clientHeight
    }, $.extend(tooltipOptions, {
        formatter: function() { return this.text; },
        distance: 0,
        style: $.extend(tooltipOptions.style, {
            pointerEvents: 'none'
        })
    })
 );

tooltip.onMouseOver = function () {
    var self = this._SVGElement;
    tooltip.refresh({
        getLabelConfig: function () {
            return {
                text: self.tooltip
            };
        },
        series: {},
        color: self.fill,
        tooltipPos: [
            self.x || self.cx,
            self.y || self.cy
        ]
    });
};

tooltip.onMouseOut = function () {
    tooltip.hide();
};

if (isTouch) {
    $(renderer.box).bind('click', function (e) {
        tooltip.onMouseOut();
    });
}

var circle = renderer.circle(100, 75, 40).attr({
    fill: '#7C75C5',
    stroke: 'black',
    'stroke-width': 1,
    tooltip: 'THIS IS CIRCLE.'
}).add();
circle.element._SVGElement = circle;

$(circle.element).on('mouseenter', tooltip.onMouseOver).on('mouseleave', tooltip.onMouseOut);

var rectangle = renderer.symbol('triangle-down', 50, 150, 100, 80).attr({
    fill: '#1050C5',
    stroke: 'black',
    'stroke-width': 1,
    tooltip: 'THIS IS TRIANGLE.'
}).add();
rectangle.element._SVGElement = rectangle;

$(rectangle.element).on('mouseenter', tooltip.onMouseOver).on('mouseleave', tooltip.onMouseOut);

});