如何在disabled = true后重新启用jQuery工具提示？

Question

Trying to temporarily disable the jQuery tooltip

$(document).tooltip( "option", "disabled", true );

When I try to re-enable them again, all of the title attributes are gone. I was trying to re-enable them using:

$(document).tooltip( "option", "disabled", false);

The title attributes is actually being removed completely when i first set it to disabled to true .

Also tried:

$(document).tooltip("disable");
$(document).tooltip("enable");

It is doing the same thing...

Update

Found a solution to my own question with the help of Jasen and zgr024. See below .

Answer 1

This appears to be a bug with the jquery version so you need a work-around to insert the title attribute after disabling tooltips.

Use a class name on the tooltip element you need re-enabled or use the [title] attribute selector.

<input type="text" class="tooltip-hack" title="tooltip text" />

$("#disable").on("click", function (e) {
    var tooltips = $("[title]");  // or $(".tooltip-hack")
    $(document).tooltip("disable");
    tooltips.attr("title", "");
});

Use the least destructive of the two depending on your html structure.

Also, you note that all title attributes are removed so be more selective with your tooltip.

// instead of
$(document).tooltip();

// use a more restrictive selector
$(".tooltip-hack").tooltip();

Working example: jsFiddle

Answer 2

So with the help of others above, I finally found a better solution. That require no brutal fix to re-adding title to every single elements. Don't get me wrong, that fix will work, but performance is important (especially I still need to support IE8 ugh).

Basically I add a custom variable to the tooltip object, this can also be a global variable. Since everything is an Object in js, you can just add anything you want to it.

$(document).tooltip.temporarilyOff

Then when I initialize the jQuery tooltip, I just need to add a check in the open :

var settings = {};
settings.tooltipClass = "tooltip";
settings.open = function (event, ui) {
    if ($(document).tooltip.temporarilyOff) {
        ui.tooltip.stop().remove();
    }
};
$(document).tooltip(settings);

Then when I need to temporarily disable the jQuery tooltip, I just need to toggle the flag anywhere I want. Like so:

$(document).tooltip.temporarilyOff = true;

Anything after this point, the tooltip won't be triggered, and all the elements will keep their title attributes. When I am done with what I am doing, I just need to set the flag back to false and tooltip will work exactly like before.

I can probably make this into jQuery plugin for easier calls and also hide the slightly ugly variable name... but anyway that's the idea. I think this is a much better fix as it won't force jQuery to remove the title attribute for nothing, then adding it back afterward doing twice the useless work.

Here is the updated example forked from @Jasen's original jsFiddle:

Answer 3

Codenamezero is a nice example of extending an object in jQuery/js but you can do this out-of-the-box:

$(document).tooltip("disable").tooltip("hide"); 

$(document).tooltip("enable").tooltip("show");  

I have validation where this method can be useful to override defaults