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”，以便在它们离开图表区域时隐藏工具提示。