用于验证的 jQueryUI 工具提示答案

【问题标题】：jQueryUI tooltip for validation用于验证的 jQueryUI 工具提示
【发布时间】：2014-02-21 19:58:02
【问题描述】：

我使用 jQueryUI 工具提示进行验证。

我只想这样做：当 Textbox focusout 或 sumbit 按钮单击空文本框工具提示时出现。我写了这个脚本，但是这个脚本有这个问题：

在单击或鼠标悬停或鼠标悬停时...在文本框中不显示工具提示。仅在聚焦或 sumbit 按钮上
工具提示不会消失，只是在用户点击时消失。

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

【问题讨论】：

在小提琴中，工具提示确实出现在鼠标悬停...
我不想发生这种情况。如何？

标签： javascript jquery html css jquery-ui

【解决方案1】：

这里有一个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();
}

【讨论】：

工具提示出现在鼠标悬停后消失。我该如何解决这个问题
我环顾了一圈，在它“有效”之前找不到保持打开状态的方法。您可能需要编写一些没有工具提示的代码。
这是一个具有类似功能的纯 css 小提琴 - jsfiddle.net/timspqr/WmRuN/275
这需要空间。我想要类似工具提示的东西

【解决方案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 ");

我在您的代码中看到但无法正常工作..

【讨论】：

这个答案和我想要的完全不同