在Highcharts Legend中使用鼠標懸停事件顯示隱藏div div

Question

我的傳奇之一叫做「Heat production」，當用戶將鼠標懸停在該圖例上時，我需要一個隱藏的div來顯示Heat生產的含義。我有六個傳說，我需要附加懸停和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的名字，而＃彈出式製作是我隱藏的div，並解釋了這個傳說的含義。我想一個for循環可以用來迭代所有的傳說，並附加懸停和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"); 
         }); 
        } 

       } 
      } 

當鼠標懸停事件觸發種種傳說輸出的最後一個傳說到控制檯的名字！

順便說一句，這是我隱藏的div：

<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(); 
});