Question

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

我只想要这样做：当文本框焦点或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();
    }
});

Answer 1

如果您希望工具提示仅出现在焦点上并在焦点上禁用。试试这个：

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

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

Answer 2

这里有FIDDLE可能会有所帮助。

我将已定义的函数移出main函数，并更改了几行。

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

用于验证的jQueryUI工具提示

2 个答案: