jQuery: How to remove the tipsy tooltip?

问题:

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.

回答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)

回答2:

The simplest way to remove tipsy ;

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

回答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

回答4:

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

回答5:

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

回答6:

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

回答7:

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

回答8:

I saw this question after Googling a situation to disable Tipsy when on a mobile device due to complexities with the touch/click event, specifically on iPads.

The solution I decided to implement was adding a small test at the top of the jquery.tipsy.js file.

To disable Tipsy on touch (mobile) devices: var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/) ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

See: The best way to detect if user agent supports touch

回答9:

Easier way im using:

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