jQuery Flot: tooltip not disapearing

Question

I'm using the JavaScript plotting (charts) library for jQuery. When I hover over a bar the tooltip shows, but when I move out from the bar it doesn't hide.

This is a problem because I'm using multiple charts in one page and when I hover over a bar in the first chart the tooltip appears and stays like that, and when I hover over the seconds chart the tooltip won't show, as in the below example:

Here's some of my code:

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

Q: How can I make the tooltip appear only when I hover over a bar, in all the charts?

Answer 1

From looking at your code, it seems for each plothover event, you are adding an additional div into the page, and all of the divs have the same ID - I'm not surprised this doesn't work - ids need to be unique, and you'd also need to hide/destroy/reuse the previous ones.

A better strategy might be to add the tooltip div once when initializing the chart, or the first time you need to show the tooltip, and then simply update the content in the plothover event to match what they are currently hovering over.

You might also want to bind a handler to 'mouseleave' on the chart div, so that you can hide the tooltip when they leave the area of the chart.