Highchart pie - datalabel cannot be selected when setting useHTML=true - highcharts

Question

when i set useHTML=true on pie datalabels the labels are not respond to mouse hover and not show tooltip
http://jsfiddle.net/wh4mw0o7/
$(function () {
$('#container').highcharts({
chart: {},
plotOptions: {
pie: {
dataLabels: {
useHTML:true, // <- THE PROBLEM !!!!!
}
}
},
series: [{
type: 'pie',
data: [
['AAA', 10],
['BBB', 20],
['CCC', 15]
]
}]
});
});
do some one know how to fix it ?
i use html in the labels(different sizing and colors so i must use html as label).

Answer 1

See the http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
and paragraph "The downsides are that it will always be laid out on top of all other SVG content, and that it is not rendered the same way in exported charts." It means that HTML elements are below SVG, which keeps events.
Related topic: https://github.com/highslide-software/highcharts.com/issues/2158
EDIT:
$.each(chart.series[0].data, function (i, d) {
$('.highcharts-data-labels div span').eq(i).mouseover(function (e) {
chart.tooltip.refresh(d);
});
});
Workaround: http://jsfiddle.net/wh4mw0o7/6/

Answer 2

As a solution you can call the covering of each part of your pie chart.
dataLabels: {
useHTML:true, // Make our labels HTML
formatter: function() { // Wrap the text of each label with a span tag
// Id of the span is equal to 'label-<Name of your label>'
return "<span id='label-" + this.point.name+ "'>" +
this.point.name + // And draw the label itself inside the span
"</span>";
}
}
Below the your chart options write event handlers:
// On the hover event of each label we can manually call the hover of
// each segment of your pie chart
$('#label-AAA').hover(
// When the mouse pointer enters the label, make it hovered and show its tooltip
function() {
// data[0] - AAA segment of the chart
mychart.series[0].data[0].setState('hover');
// Refresh the tooltip of this segment
mychart.tooltip.refresh(mychart.series[0].points[0]);
},
function() { // When the mouse pointer leaves the label
mychart.tooltip.hide();
});
For each label the code is same. The disadvantage of this approach is that you have to know all labels names in advance. Here is JSFiddle: http://jsfiddle.net/wh4mw0o7/4/