Clearing HTML hints in d3.js

I have embedded HTML hints in d3.js after this example using the following code:

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

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

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

After doing some research, it seems that NVD3 solved this problem beautifully using sending . However, I do not quite understand how dispatching works, and based on this question, I assume that in this case there may be a simpler approach.

Update

- fadeIn fadeOut. , . , , fadeIn/out , mouseover/out.

, . , JQuery fadeOut. , , , . :

• JQuery fadeOut
• CSS (, NVD3)