jQueryUI всплывающая подсказка для проверки

Question

Я использую всплывающую подсказку jQueryUI для проверки.

Я просто хочу, чтобы это сделать: когда Textbox focusout или sumbit нажмите кнопку мыши, появится текстовая подсказка. Я пишу этот сценарий, но этот сценарий есть эта проблема:

1. по щелчку или MouseOver или MouseOut ... в Textbox подсказка не appear.just на focusout или кнопку заполните

2. подсказке не исчезают просто исчезают, когда пользователь нажимает на него.

Fiddler Link

.errorClass { border: 1px solid red; } 
<div id="#tooltip"> 
<lable ><input id="FName" name="FName" type="text" title="my FName" /> 
<br/><br/> 
    <input id="Post" maxlength="200" name="Post" title="my Post" type="text" value=""><br/><br/> 
     <input type="submit" value="sumbit" class="insertBtn" onclick="return ISValidInfo()" /> 
     <div> 
$(function() { 
     $("#tooltip").tooltip().off("mouseover mouseout ");  
     $("#FName").focusout(function() { 
      ISValidFname(); 
     }); 
     $("#Post").focusout(function() { 
      ISValidPost(); 
     }); 
     function ISValidFname() { 
      if (!$.trim($('#FName').val())) { 
       $("#FName").addClass("errorClass") 
       $("#FName").tooltip({ 
        position: { 
         at: "right top", 
         my: "left bottom", 
        } 
       }); 
       $("#FName").tooltip("open"); 
      } 
      else { 
       $("#FName").removeClass("errorClass") 
      } 
     } 
     function ISValidPost() { 
      if (!$.trim($('#Post').val())) { 
       $("#Post").addClass("errorClass") 
       $("#Post").tooltip({ 
        position: { 
         at: "right top", 
         my: "left bottom", 
        } 
       }); 
       $("#Post").tooltip("open"); 
      } 
      else { 
       $("#Post").removeClass("errorClass") 
      } 
     } 

    function ISValidInfo() { 
     ISValidFname(); 
     ISValidPost(); 
    } 
}); 

Answer 1

Вот FIDDLE, которые могли бы помочь ,

Я переместил определенные функции из основной функции и изменил несколько строк.

JS

$(function() { 
     $("#tooltip").tooltip();  
     $("#FName").focusout(function() { 
             ISValidFname(); 
             }); 
     $("#Post").focusout(function() { 
             ISValidPost(); 
             }); 
}); 

function ISValidFname() 
{ 
if (!$.trim($('#FName').val())) 
    { 
    $("#FName").addClass("errorClass") 
    $("#FName").tooltip({ 
          position: { 
            my: "left top", 
            at: "right top" 
            } 
          }); 
    $("#FName").tooltip("open"); 
    } else { 
      $("#FName").removeClass("errorClass") 
      } 
} 

function ISValidPost() 
{ 
if (!$.trim($('#Post').val())) { 
      $("#Post").addClass("errorClass") 
      $("#Post").tooltip({ 
           position: { 
              my: "left top", 
              at: "right top" 
              } 
           }); 
      $("#Post").tooltip("open"); 
      } else { 
        $("#Post").removeClass("errorClass") 
        } 
} 

function ISValidInfo() 
{ 
    ISValidFname(); 
    ISValidPost(); 
} 

Answer 2

Если вы хотите, чтобы ваш инструмент кончик появляться только на фокус-ин и отключить на фокус вне. Попробуйте это:

$("#tooltip").tooltip({ 
    disabled: true 
}).on("focusin", function() { 
    $(this) 
     .tooltip("enable") 
     .tooltip("open"); 
}).on("focusout", function() { 
    $(this) 
     .tooltip("close") 
     .tooltip("disable"); 
}); 

The fiddle

Более короткий путь:

$("#tooltip").tooltip().off("mouseover mouseout "); 

Что я вижу в вашем коде, но не работает должным образом ..