jQuery Flot：工具提示沒有消失

Question

我正在使用jQuery的JavaScript繪圖（圖表）庫。 當我將鼠標懸停在欄上時，工具提示顯示，但是當我從欄中移出時它不會隱藏。

這是一個問題，因為我在一個頁面中使用多個圖表，當我將鼠標懸停在第一個圖表中的一個條形圖上時，工具提示出現並保持這樣，當我將鼠標懸停在秒圖表上時，工具提示將不會顯示，如以下示例：

這是我的一些代碼：

<?if($pieCount > 0):?>
    $.plot($("#bar-chart1"), data1, options);
    $.plot($("#bar-chart2"), data2, options);
    <?endif;?>
    <?if($statCount > 0):?>
    $.plot($("#bar-chart3"), data3, { xaxis: { ticks:hoursticksdata }, grid: { hoverable: true } });
    $.plot($("#bar-chart4"), data4, { xaxis: { ticks:hoursticksdata }, grid: { hoverable: true } });
    <?endif;?>
    var previousPoint = null;
    $(".bar-chart").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;
                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                             item.series.xaxis.ticks[previousPoint]['label'] + " - " + item.series.data[previousPoint][1] + " " + item.series.label);
            }
        }
    });

    $(".bar-chart").bind("plotclick", function (event, pos, item) {
        if (item) {
            //console.log(customerdata);
            window.location = '/dashboard/customer/' + customerdata[item.dataIndex];
        }
    });

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fff',
            'color': '#000',
            'border': '1px solid #333',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }
    $('#customerSelect').change(function(){
        window.location = $(this).val();
    });

問：如果我將鼠標懸停在所有圖表的條形圖上，我怎樣才能顯示工具提示？

Answer 1

通過查看代碼，似乎每個plothover事件，你在頁面中添加一個額外的div，並且所有div都具有相同的ID - 我並不感到驚訝這不起作用 - ids需要是唯一的，你還需要隱藏/破壞/重用以前的那些。

更好的策略可能是在初始化圖表時添加工具提示div，或者第一次需要顯示工具提示，然后只更新plothover事件中的內容以匹配當前懸停的內容。

您可能還希望將處理程序綁定到圖表div上的“mouseleave”，以便在它們離開圖表區域時隱藏工具提示。