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 pletely 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.

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 pletely 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.

• javascript
• jquery
• jquery-ui-tooltip

• 2 when you re-enable the tooltips should continue working.. jsfiddle/D8gMy – Pedro Estrada Commented Jul 11, 2014 at 18:28
• 1 This jsfiddle does not continue to work with jquery v2.1.0 and ui v1.11. What version of the libraries are you using? This looks a bug. – Jasen Commented Jul 11, 2014 at 18:44
• 1 jQuery v1.11.1 jQuery UI - v1.11.0 – codenamezero Commented Jul 11, 2014 at 18:46
• 1 It looks like I've reproduce the same issue using your first example. I switch the fiddle to use external source http://code.jquery./jquery-1.11.1.js and http://code.jquery./ui/1.11.0/jquery-ui.js. Initially it works, but once I hit disable, i get the same issue. The title attribute is being removed from the element also. – codenamezero Commented Jul 11, 2014 at 18:53
• 3 you will need to re-add the title attribute since the disabled flag is using removeAttr('title')... try setting it a variable before the disable so you can add it back... but yea its kinda stupid – zgr024 Commented Jul 11, 2014 at 18:56

3 Answers 3

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

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:

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