Tooltip BUG + solve

[GoogleCodeExporter]

Hello.
I have problem, when 2 graphs very closely and you focus on point with same 
dataIndex the tooltip not change!
This is my solution to fix it!

function addToolTips() {
 var previousPoint = null;
 $("#placeholder").bind("plothover", function (event, pos, item) {
  $("#x").text(pos.x.toFixed(2));
  $("#y").text(pos.y.toFixed(2));
  if (item) {
   if (previousPoint != item.dataIndex+item.series.label) {
    previousPoint = item.dataIndex+item.series.label;
    $("#tooltip").remove();
    var x = makeDateForToolTip(item.datapoint[0].toFixed(2)),
    y = Math.floor( item.datapoint[1].toFixed(2) ),
    str = "<b>" + item.series.label + "</b> [" + y + "]<br>" + x;
    showTooltip(item.pageX, item.pageY,str);
   }
  } else {
   $("#tooltip").remove();
   previousPoint = null;
  }
 });
}

Original issue reported on code.google.com by zniki...@gmail.com on 27 Sep 2011 at 2:22

[GoogleCodeExporter]

I had posted a message about this on the flot discussion groups a couple months 
ago.
http://groups.google.com/group/flot-graphs/browse_thread/thread/80c07622842c4326

I have provided a working demo of the minor bug and the differences
between the two methods here:
http://frossen.servegame.org/flot/

The contents of that post are pasted below.
I am submitting a pull request containing this fix.

In the example at http://people.iola.dk/olau/flot/examples/interacting.html,
you can see a minor bug in the tooltip when you mouse over the two
points at 7.00,0.66 and 7.00,0.75.  If you move your mouse back and
forth over the two points, the tooltip does not change.  This is
because the two points have the same index but are in different
arrays.

Also, this method causes the tooltip to flash as it is added and
removed from the DOM each time the user hovers over a point.

As you will see in the code below, my suggestion is to create a
persistent tooltip div and simply hide/show it as necessary.

The main benefit is that this resolves the issue of the tooltip not
updating when moving the cursor between points that have the same
index.  It also eliminates the flicker associated with removing and
adding the tooltip div from the DOM.  This is most apparent when there
are many points closely grouped.  There are additional minor benefits
as well in my opinion.  I think this method provides a miniscule
improvement to performance by eliminating the small amount of overhead
associated with adding and removing the element from the DOM and
applying CSS styles every time.  The code is also shorter and cleaner
in my opinion.  In my use of this method, I have found no negative
effects or deficiencies compared to the example method.

$(document).ready(function() {
    $('<div id="tooltip"></div>').css( {
        position: 'absolute',
        display: 'none',
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body");

    $("#placeholder").bind("plothover", function (event, pos, item) {
        if (item) {
            var x = item.datapoint[0].toFixed(2),
                 y = item.datapoint[1].toFixed(2);
            $("#tooltip").html(x + ', ' + y)
               .css({top: item.pageY, left: item.pageX})
               .fadeIn(200);
        } else {
            $("#tooltip").hide();
        }
    });
});

Original comment by leroux.c...@gmail.com on 3 Mar 2012 at 11:47

[GoogleCodeExporter]

I'm doing something similar, but the tooltip still flashes a lot for me.. i.e. 
when i start getting close to a data point, and move mouse towards its center, 
the tooltip can show/hide several times (though the item is highlighted as 
active all that time without flashing).. some basic JS debugging shows that at 
times item is "null" even when hovering literally over the center of the data 
point :/

Any ideas how to solve?

Original comment by mbachw...@gmail.com on 12 Mar 2012 at 1:37

[GoogleCodeExporter]

Issue 636 has been merged into this issue.

Original comment by dnsch...@gmail.com on 7 May 2012 at 5:45

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 7 May 2012 at 5:46

• Changed state: Accepted

[GoogleCodeExporter]

This still appears to be an issue.  I have multiple div elements acting like a 
directory list and the title is the status of the item.  If two have the same 
status and the user moved between them quick enough the tooltip stays up but 
hovering over the first item.  No the case in IE or Firefox.  If the element 
the tooltip is referring to has been left it should close.  I tried adding ID's 
but this has no effect.  It seems the close is delayed slightly (probably 
usability) and the open also.  But if the text is the same it ignores the 
close/open operations.  TWO YEARS LATER and they still have not fixed this?

The attached html demonstrates the issue.

Original comment by denize.p...@gmail.com on 6 Oct 2014 at 8:10

Attachments:

• chromebug.html