jQuery tooltip stays when content is changed

Question

I just stumbled over a problem regarding the jQuery UI tooltip. I added the tooltips for the whole document and applied some style:

$( document ).tooltip({
    position: {
        my: "center top+20",
        at: "center bottom",
        using: function( position, feedback ) {
            $( this ).css( position );
            $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
    }
});

Now if I hover over items that have a title, the tooltip is shown. So far, so good.

The problem is that i have pretty dynamic content, so sometimes an element will be replaced by another, while the tooltip is visible. that leads to the problem, that the tooltip won't fade.

i reproduced this problem in this fiddle:

http://jsfiddle.net/aE8qn/ ...just click on the first item (staying with the mouse on top of it). When the item is removed, move your mouse away and back over it. You'll notice that the old tooltip will stay, while the now one overlays it when shown.

is there some workaround?

Answer 1

Just in case someone is still on the lookout for a solution:

$( document ).tooltip({
    position: {
        my: "center top+20",
        at: "center bottom",
        using: function( position, feedback ) {
            /* fix tooltip not hiding problem */
            if($( ".ui-tooltip" ).length>1){
                // since the new tooltip is already added, there are now 2. 
                // removing the first one fixes the problem
                $( ".ui-tooltip" )[0].remove();
            }
            $( this ).css( position );
            $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
    }
});

in fiddle: http://jsfiddle.net/aE8qn/1/