jQueryUI驗證工具提示

我使用jQueryUI工具提示進行驗證。jQueryUI驗證工具提示

我只是想做到這一點：當文本框聚焦或sumbit按鈕單擊空文本框工具提示出現。我寫這個劇本，但這個劇本有這個問題：

點擊或將鼠標懸停或鼠標移開......在文本框工具提示不appear.just對事件的內容或透過按鈕
提示不僅僅是消失用戶點擊時消失。

.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(); 
    } 
});

來源

2014-02-21 Vahid Akbari

PLZ SM幫助...... –

在小提琴，提示確實出現在鼠標懸停... – Bhavik

我想不是這個happen.how？ –

這裏有一個FIDDLE，這可能有助於。

我將定義的函數移出主函數，並改變了幾行。

$(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(); 
}

來源

2014-02-21 11:58:02 TimSPQR

在鼠標懸停後出現工具提示它disapear.how我可以修復， –

我已經看了一下，我找不到方法來保持它打開，直到它是「有效的」。您可能需要編寫一些沒有提示的代碼。 – TimSPQR

這是一個與純CSS的功能相似的小提琴 - http://jsfiddle.net/timspqr/WmRuN/275/ – TimSPQR

如果你希望你的工具提示只出現在對焦並禁用焦點了。試試這個：

$("#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 ");

，我在你的代碼中看到，但無法正常工作..

來源

2014-02-21 11:32:28 Bhavik

這個答案是完全不同的，我想 –

jQueryUI驗證工具提示

回答

相關問題