12

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.

Community
  • 1
  • 1
codenamezero
  • 2,724
  • 29
  • 64
  • 2
    when you re-enable the tooltips should continue working.. http://jsfiddle.net/D8gMy/ – Pedro Estrada Jul 11 '14 at 18:28
  • 1
    This [jsfiddle](http://jsfiddle.net/xMxqg/2/) 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 Jul 11 '14 at 18:44
  • 1
    jQuery v1.11.1 jQuery UI - v1.11.0 – codenamezero Jul 11 '14 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.com/jquery-1.11.1.js` and `http://code.jquery.com/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 Jul 11 '14 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 Jul 11 '14 at 18:56
  • 1
    Yes, insert a `.attr("title", "")` back into the element right after you disable. You don't even need to know the original title value -- just need the bare `title` attribute for it to work. See http://jsfiddle.net/xMxqg/3/. – Jasen Jul 11 '14 at 19:02
  • 1
    Ok this is indeed stupid, but is there other workaround? `$(document).tooltip("disable");` essentially removed ALL my `title` attributes from EVERY elements. I can't just mass add a `title` back, especially `$(document).attr("title", "");` won't do it... this is going to be a performance hit too. – codenamezero Jul 11 '14 at 19:08
  • 1
    Short of using a different version you could add a class to these so you can get them all with one line `$(".stupid-tooltips").attr("title", "")`. – Jasen Jul 11 '14 at 19:12
  • @Jasen something is still not right.. I just tried it out using the old jQuery 1.9.1 and UI 1.9.2, and it still have the same issue. – codenamezero Jul 11 '14 at 19:22
  • Have you removed the reference to the other versions? – Jasen Jul 11 '14 at 19:52
  • @Jasen Yes. But I am going to drop the older jQuery, and try to make it work with the new libraries. – codenamezero Jul 11 '14 at 20:04

3 Answers3

6

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

Jasen
  • 14,030
  • 3
  • 51
  • 68
  • Is there a way to access/modify the global jquery.ui.tooltip object? I want to modify the `open` dynamically. – codenamezero Jul 11 '14 at 20:03
  • You can use `.tooltip({ open: function(e, ui){} })` then you can specify a function to run. If you need more help with that you should open a new question. – Jasen Jul 11 '14 at 20:13
5

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
  • 2,724
  • 29
  • 64
1

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

yardpenalty.com
  • 1,244
  • 2
  • 17
  • 32