jQuery: How to remove the tipsy tooltip?

Question

I add the tipsy tooltip to divs with the .placeTaken class. The user can then drag boxes around, so I remove the class and add it to a new div instead. When this happens, I add a new tipsy tooltip to that div and that works fine, but I want to remove the old one.

They say if you wish to remove the tooltip by setting the title attribute to an empty string, set the original-title attribute instead. I tried $("#"+dropFromId).attr("original-title", ""); but the tooltip is still there. I can't even change the tooltip title by setting another original-title.

What am I doing wrong?

Edit: I guess I didn't give you guys enough information. I use ajax to grab the places that are taken from the database. The PHP returns an associative array (customers) that I then use in my JavaScript where the taken place matches a name. The places that are taken changes when dropping, so I perform the ajax function again to update the array with all the taken places. At fist, I add the tipsy tooltip to all the taken places like so

$("#map div.placeTaken").tipsy({gravity: 'w', html: true, fade: true, title:
    function(){
        // id could for example be map74, substring to 74
        var id = $(this).attr("id").substring(3,6);
        return '<div>'+customers[id]+'</div><br />';
    }
});

So the title is equal to what matches that place in the array. I hope that I am explaining this good enough. When the box is dropped in a new place, this is what happens

$("#map div span").bind( "dragstop", function(event, ui) {
        // some code here to change the .placeTaken class       
        // update database with the new place
        $.ajax({
            type: "POST",
            url: "map.php",
            data: "dropFromId="+ dropFromId.substring(3,6) +"& dropToId="+ dropToId.substring(3,6),
            success: function(){
            // ajax function to update the js array with new places
            customerTooltip(); 
            }
        });

        // on this place, add tooltip
        $("#"+dropToId).tipsy({gravity: 'w', html: true, fade: true, title:
            // funktion för att avgöra vilken title som ska användas
            function(){
                var id = dropToId.substring(3,6);
                return '<div>'+customers[id]+'</div><br />';
            }
        });
    }   
});

This all works fine, so I thought that I'd simply change the dropFromId title to "" on the drop, so that I remove it.

Answer 1

Using $(".tipsy").remove(); seems to do the trick since a div with a tipsy class is appended to the body of the doc when the tooltip is shown.

Just be sure you don't use a tipsy class elsewhere (i.e. call your tooltip's something like toolTip instead)

Answer 2

The simplest way to remove tipsy ;

$('.tipsy:last').remove();

Answer 3

If you don't want the tipsy to show anymore just use .tipsy('disable') on the element.

If you are using trigger: manual and you want to hide it you can just remove the .tipsy div on the body.

There's also disable enable and toggleEnabled

Answer 4

$("#"+dropFromId)[0].setAttribute('original-title', '')

Answer 5

$("#tipsyfiedElement").unbind('mouseenter mouseleave'); // Or whatever event trigger the tiptool