HTML tooltip cleanup in d3.js

Question

I have implemented HTML tooltips in d3.js following this example, using code like this:

function onmouseover(d) {
    $("#tooltip").fadeOut(100,function () {
        // generate tooltip
        $("#tooltip").fadeIn(100);
    });
}

function onmouseout() {
    $("#tooltip").fadeOut(250);
}

It works, but exhibits a behavior where if the mouse moves quickly over multiple nodes a tooltip may remain stuck on the page. The example above shows the same behavior (happy wiggling!).

Having done some research it seems that nvd3 has solved this problem beautifully using dispatch. However I'm not really clear on how dispatch works, and based on this question I imagine there may be a simpler approach in this case.

Update

This issue only arises due to fadeIn and fadeOut. If these are set to zero there is no problem. So the question really is whether it's possible to set it up so that fadeIn/out are interrupted if there is another mouseover/out event.

Resolution

The problem was that there was only one tooltip. This couldn't respond to events while in the middle of a JQuery fadeOut. The answer is to have multiple tooltips so one can be fading in while the old one is fading out. This can be achieved in two ways:

• JQuery fadeOut
• CSS transitions (the approached used by NVD3)

Answer 1

NVD3's solution is to run a cleanup method every time there's a mouseout event on any node. See their source on line 78 here: https://github.com/novus/nvd3/blob/master/src/tooltip.js. This doesn't have to be done through d3.dispatch; it can be done directly as well.

You could also look into some of the workarounds suggested for reliably catching mouseout events: Why can't I reliably capture a mouseout event?