Question

点击密码tooltip时，我无法显示textbox。任何人都有任何建议，为什么jquery代码不起作用？

              <div class="form-group">

                <input type="password" name="password" id="password" tabindex="1" class="form-control" placeholder="Password" required />

                     </div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <!--jquery-->

                      <script>

                        $(document).ready(function() {

                    $('#password').on({
                                    "click": function() {
                                            $(this).tooltip({ items: "#password", content: "Displaying on click"});
                                            $(this).tooltip("open");
                                                        },
                                                "mouseout": function() {      
                                                $(this).tooltip("disable");   
                                                                            }
                                                                                });

                            });


                    </script>

Answer 1

工具提示不是jquery库的一部分。你需要包含jquery ui。此外，您需要确保在尝试禁用工具提示之前初始化工具提示。

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {
        var hasToolTip =false;
        $('#password').on({
            "click": function() {
                hasToolTip = true;
                $(this).tooltip({ items: "#password", content: "Displaying on click"});
                $(this).tooltip("open");
            },
            "mouseout": function() {      
                if(hasToolTip)
                {
                    $(this).tooltip("disable"); 
                    hasToolTip = false;
                }                                                   
            }
        });
    });

</script>
<body>
    <div class="form-group">
        <input type="password" name="password" id="password" tabindex="1" class="form-control" placeholder="Password" required />
    </div>
</body>

https://jqueryui.com/tooltip/

单击文本框时显示的工具提示

1 个答案: