score:2

Accepted answer

I don't see anything in the API that allows you to "turn on" the tooltip for Renderer created objects. In the link you provided, they create points close to the Renderer objects, and then the mouseover of the object passes that point.

You can follow that pattern (mapping points to the Renderer objects):

function some(renderer) {
    renderer.rect(10, 10, 100, 100, 1).attr({
        fill: 'red'
     }).add().on('mouseover', function () {
                var chart = Highcharts.charts[0];
                var point = chart.series[0].points[0];
                chart.tooltip.refresh(point);
        })
            .on('mouseout', function () {
                var chart = Highcharts.charts[0];
                chart.tooltip.hide();
        });
} 

See fiddle here.

Or you could manipulate the tooltip even more directly:

function some(renderer) {
    renderer.rect(10, 10, 100, 100, 1).attr({
        fill: 'red'
    }).add().on('mousemove', function(e) {    
        Highcharts.charts[0].tooltip.move(e.pageX,e.pageY); // follow the mouse       
    }).on('mouseout', function(e) {
        Highcharts.charts[0].tooltip.hide(); // off the rect, hide it
    }).on('mouseover', function(e) {
        var tooltip = Highcharts.charts[0].tooltip;
        clearTimeout(tooltip.hideTimer); // if it was in the process of hiding, cancel
        tooltip.isHidden = false; // mark it as shown
        tooltip.label.attr({
                text: 'Hi Mom!' // add a label
        });
        tooltip.label.attr('opacity', 1).show(); // show it
    });
}

See updated fiddle here.


Related Articles