bootstrap工具提示触发焦点

时间:2013-02-08 12:32:04

标签: javascript jquery twitter-bootstrap tooltip

当用户在输入中输入超过50 000时,我想使用bootstraps工具提示显示一条消息。

以下是代码:

<!DOCTYPE HTML>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
        <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
        <script type="text/javascript">
          $(document).ready(function () {           

            $(this).tooltip("hide");

            $("#myInput").on("keyup", function() {
                console.log(this.value);
                if (this.value > 5000) {
                    $(this).tooltip("show");
                    $(this).val(50000);
                } else {
                    $(this).tooltip("hide");
                }
            }).tooltip({
                placement: "right",
                trigger: "focus"
            });

          });
        </script>
    </head>
    <body>
        <input id="myInput" title="You cannot enter more than 50 000" /> 
    </body>
</html>

或查看http://jsfiddle.net/Ljxz2/

问题是工具提示是在焦点上触发消息(我认为),因此当用户点击(或聚焦)输入时会显示消息。我怎么把它关掉?

1 个答案:

答案 0 :(得分:1)

只需将工具提示功能调用中发送的选项中的“触发器”值更改为“手动”。

tooltip({
    placement: "right",
    trigger: "manual"
};  

http://jsfiddle.net/YcQat/