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

我有两个输入字段，一个Span标记display=“none”；。如果我点击这两个输入中的一个，我想显示我的工具提示。jQuery显示我的工具提示，如果我输入了一个键，则隐藏该提示。 这也行

如果在同一输入中再次单击，jquery将显示跨度，但在输入键后不会再次隐藏。为什么?

为什么我的工具提示列表不在输入字段的中间

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>

我的例子是：

---

提前感谢您的帮助。

您没有任何focusout，您的下一个（“span”）没有用。。下一步已经是您的跨度：）

这项工作：

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

如果您打算使用keyup，这同样有效：

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

1.）jquery 1.9版及更高版本支持隐藏中的参数。此外，还需要隐藏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;
} 

---

我还有一个问题。如果我按TAB键，工具提示不会显示在第二次输入中

我必须使用jquery1.7.2

JQUERY：

jQuery('.tooltip').focus(function() {
            jQuery( this ).next( "span" ).show("slow");

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

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

示例：

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

---

啊，好的。谢谢你的帮助。我还有一个问题。我可以同时隐藏“聚焦”和“键控”吗？如果我在第一次输入时按TAB键，工具提示不会显示在第二次输入中。谢谢，但是如果我按TAB键，我会看到工具提示并直接隐藏它。事实上，我应该在按下kex键之后。

jQuery('.tooltip').focus(function() {
            jQuery( this ).next( "span" ).show("slow");

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

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