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验证工具提示

回答

相关问题