jQuery Tooltip-反转tooltip（）。off（将鼠标悬停在鼠标上）

Question

So basically, I'm trying to create a form that shows tooltips on mouseover. Once one of the fields has been clicked, I want to disable the cursor from triggering other tooltips. Once the user clicks outside of the text box, I want the mouse to resume triggering tooltips.

My problem - I've got everything working, except I can't turn the mouse listeners back on. Code is as follows:

$(function () {
infoTips();
});

function infoTips(){
$("input:text").tooltip({
    content : function(){
        return $(this).attr("title");
    },
    position : { 
        my : "left top",
        at : "right top", 
        of : ".tip"     
    }


}).on("focusin", function () {
    $("*").tooltip().off("mouseover mouseout mouseleave");                

}).on("focusout", function () {

   //This line doesn't work -
  $("*").tooltip().on("mouseover mouseout mouseleave");
  //
});
} 

http://jsfiddle.net/kjhansen/WmRuN/480/

Thank you!

Answer 1

I changed the selectors to "this" and changed "off" to "remove" so it looks like this:

}).on("focusin", function () {
      $(this).tooltip().remove("mouseover mouseout mouseleave");
    }).on("focusout", function () {
      $(this).tooltip().on("mouseover mouseout mouseleave");
    });

Here is an updated jsFiddle

Answer 2

jQuery does not keep the handlers in memory when you turn them off.

For your situation, I believe you could just enable/disable the jQuery tooltips.

Edit: Updated to exclude current input.

ie

function infoTips(){
var $inputsWithTooltips = $("input:text");
$inputsWithTooltips.tooltip({
    content : function(){
        return $(this).attr("title");
    },
    position : { 
        my : "left top",
        at : "right top", 
        of : ".tip"     
    }


}).on("focusin", function () {
    $inputsWithTooltips.not(this).tooltip("disable");                

}).on("focusout", function () {
    $inputsWithTooltips.not(this).tooltip("enable");      
});
} 

edit: jsfiddle: http://jsfiddle.net/WmRuN/485/