1

我试图找出如何在自定义对象上放置工具提示。特别是在一个圆圈（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);

});

4

0 回答 0