Использование события mouseover в Highcharts Легенда, чтобы показать скрытый div

Question

Одна из моих легенд называется «Производство тепла», и когда пользователь наводит курсор на эту легенду, мне нужен скрытый div, чтобы появиться с объяснением того, что означает производство тепла. У меня есть шесть легенд, которые мне нужно связать с событиями наведения и mousemove.

Это то, что я до сих пор:

var moveLeft = 20; 
var moveDown = 10; 

$('???').hover(function(e) { 
    $('#pop-up-heat-production').show(); 
}, function() { 
    $('#pop-up-heat-production').hide(); 
}); 

$('???').mousemove(function(e) { 
    $("#pop-up-heat-production").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); 
}); 

... где ??? это название Legend, а # pop-up-heat-production - это мой скрытый div с объяснением того, что означает эта легенда. Я думаю, что for-loop может использоваться для повторения всех легенд и привязки событий наведения и mousemove, но как это делается? Я играл с следующим примером коды, но все легенды получить последнюю легенда прилагается к нему !:

events: { 
       load: function() { 
        var chart = this, 
         legend = chart.legend; 
        for (var i = 0, len = legend.allItems.length; i < len; i++) { 
         var item = legend.allItems[i].legendItem; 
         var name = item.text; 
         item.on('mouseover', function (e) { 
          //show custom tooltip here 
          console.log(name); 
         }).on('mouseout', function (e) { 
          //hide tooltip 
          //console.log("mouseout"); 
         }); 
        } 

       } 
      } 

Когда событие Mouseover запускает всем выходным легенд имя последней подписи к консоли!

Btw, вот мой скрытый ДИВ:

<div id="pop-up-heat-production"> 
    <p><strong>Heat production</strong></p> 
    <p>Some explanation here...</p> 
</div> 

Спасибо заранее.

Answer 1

Как насчет делегированного события на объекте диаграммы контейнера: http://jsfiddle.net/8zon8tLp/

$('#container').on('mouseenter','.highcharts-legend-item',function(event) { 
    var seriesName = $(this).text(); 
    $(".tooltip[data-series='" + seriesName + "']").css({left:event.clientX, top:event.clientY}).show(); 
}).on('mouseleave','.highcharts-legend-item',function(event) { 
    var seriesName = $(this).text(); 
    $(".tooltip[data-series='" + seriesName + "']").hide(); 
});