jquery - 为什么我自己的 jQuery 工具提示在第二次单击输入字段后没有隐藏？

Question

我有两个输入字段，一个 Span 标签，什么是 display="none";。如果我点击这两个输入之一，我想显示我的工具提示。 jQuery 显示我的工具提示，如果我输入一个键隐藏它。 这也行。

1. 如果我在同一输入中再次单击，jquery 会显示跨度，但在输入 key 后不会再次隐藏它。为什么？

2. 为什么我的工具提示不在输入框的中间？

CSS

.arrow_box {
   position: absolute;
   background-color: #ffdc00;
   background-image: -moz-linear-gradient(center top , #ffdc00, #e3c300);
   -webkit-transform: translate(0, -50%);
   -moz-transform: translate(0, -50%);
   -ms-transform: translate(0, -50%);    
   transform: translate(0, -50%); 
   top: 50%;
   vertical-align: middle;
   display: block;
   width: 200px;
   right: -80px;  
   padding: 5px 15px;
}

.arrow_box p {
   padding: 0;
}

.arrow_box:after, .arrow_box:before {
   right: 100%;
   top: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
}

.arrow_box:after {
   border-color: rgba(136, 183, 213, 0);
   border-right-color: #ffdc00;
   border-width: 10px;
   margin-top: -10px;
}
.arrow_box:before {
   /*border-color: rgba(194, 225, 245, 0);*/
   /*border-right-color: #c2e1f5;*/
   border-width: 36px;
   margin-top: -36px;
}

HTML

<div class="input-group">
<input type="text" name="name" maxlength="100" value="" class="form-control tooltip" id="password">
<span class="tool-tip right slideIn" style="display: none;">
    <div class="arrow_box">
        <b>Tooltip</b>
        <p>Test 11 22 333</p>
    </div>
</span>
</div> 
<br/>
<div class="input-group">
<input type="text" name="name" maxlength="100" value="" class="form-control tooltip" id="password">
<span class="tool-tip right slideIn" style="display: none;">
    <div class="arrow_box">
        <b>Tooltip 2</b>
        <p>mTest test tes steste</p>
    </div>
</span>
</div>

JQUERY:

jQuery(document).ready(function () {
        // ToolTip
        jQuery('.tooltip').focus(function() {
            // $( this ).next( "span" ).css( "display", "block" );
            $this = jQuery(this);

            jQuery( this ).next( "span" ).show("slow");

            jQuery('.tooltip').keyup(function() { 
                jQuery( this ).next( "span" ).hide('slow');
            });
        });
});

我的例子:

https://jsfiddle.net/2pt8nqcx/

预先感谢您的帮助。

Answer 1

1.) jquery 1.9 及更高版本支持 hide 中的参数。此外，您需要隐藏 focusout 上的工具提示。请参见下面的代码。

jQuery(document).ready(function () {

            // ToolTip
            jQuery('.tooltip').focus(function() {
                // $( this ).next( "span" ).css( "display", "block" );
                $this = jQuery(this);

                jQuery( this ).next( "span" ).show("slow");
            });
            jQuery('.tooltip').focusout(function() {
                    jQuery( this ).next( "span" ).hide("slow");
            });
 });

2.) In your jsfiddle, you are applying css to arrow_box class. You need to apply position to its parent first. Add below css and you need to make few more changes in right/transform value and you are good.

.tool-tip {
    position:absolute;
}