How to re-enable jQuery tooltip after disabled = true?

javascript, jquery, jquery-ui-tooltip

Solution

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:

Problem

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.

Original source