Question

我正在使用jQuery的JavaScript绘图（图表）库。当我将鼠标悬停在栏上时，工具提示会显示，但是当我从栏中移出时它不会隐藏。

这是一个问题，因为我在一个页面中使用多个图表，当我将鼠标悬停在第一个图表中的某个栏上时，工具提示会出现并保持不变，当我将鼠标悬停在秒表图表上时，工具提示赢了＆＃ 39; t显示，如下例所示：

enter image description here

这是我的一些代码：

<?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事件中的内容以匹配他们当前悬停的内容。 / p>

您可能还希望将处理程序绑定到图表div上的“mouseleave”，这样您就可以在它们离开图表区域时隐藏工具提示。

jQuery Flot：工具提示不会消失

1 个答案: