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

I recently had this issue, here's how I resolved it:

Use this to set the original-title attribute to 'stop':

$('.myElement').attr('original-title','stop');

Then, in jquery.tipsy.js, change the code to the following:

...
} else if (typeof opts.title == 'function') {
    title = opts.title.call(this);
}

if (title != 'stop') {    //line 32
    ...
    ...
}                         //line 62
...

In my release (0.1.7) the added code starts at line 32 and ends bracket at line 62. Tipsy should see that your title attribute equals 'stop' and wont try to open the tooltip.

Also, this spits out some error to the console. It doesn't make any difference, but if you want to get rid of it, add this at line 73 (after adding previous code)

try { tip.remove(); } catch(err){}

POW

Answer 2

Easier way im using:

$('body').find('.tipsy').each(function(){
    $(this).remove();
});

Answer 3

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 4

The simplest way to remove tipsy ;

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

Answer 5

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 6

Use: .unbind('mouseenter mouseleave'); to remove a tipsy method.