当我将鼠标放在输入类型的文本上时，我需要在小弹出窗口中显示一些信息。
目前我正在使用这样的标题应答：http://jsfiddle.net/q8Lp0nLo/
<input type="text" size="5"><div>The text to show</div>
div{
display:inline-block;
visibility:hidden;
position:absolute;
background-color:#E5E5F0; color:black;
}
input[type="text"]:hover~ div{visibility:visible}
它在Chrome上工作正常但在IE上却没有。如果我完全填写输入，则弹出窗口不会出现或出现，并在几秒钟后隐藏。
制作此产品的最佳方法是什么？ ：完成
新问题：如何在鼠标位置旁边显示弹出窗口（我不需要在鼠标移动的同时移动弹出窗口，只需在第一个位置显示一次）。
实际代码：http://jsfiddle.net/q8Lp0nLo/
喜欢这个，但弹出窗口：http://jsfiddle.net/BaDCe/
由于
答案 0 :(得分：2)
试试这个：
/* tooltip */
.tool-tip{
color: #fff;
background-color: rgba( 0, 0, 0, .7);
text-shadow: none;
font-size: .8em;
visibility: hidden;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
text-align: center;
opacity: 0;
z-index: 999;
padding: 3px 8px;
position: absolute;
cursor: default;
-webkit-transition: all 240ms ease-in-out;
-moz-transition: all 240ms ease-in-out;
-ms-transition: all 240ms ease-in-out;
-o-transition: all 240ms ease-in-out;
transition: all 240ms ease-in-out;
}
.tool-tip,
.tool-tip.top{
top: auto;
bottom: 114%;
left: 50%;
}
.tool-tip.top:after,
.tool-tip:after{
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -7px;
content: ' ';
height: 0px;
width: 0px;
border: 6px solid transparent;
border-top-color: rgba( 0, 0, 0, .7);
}
/* default heights, width and margin w/o Javscript */
.tool-tip,
.tool-tip.top{
width: 80px;
height: 22px;
margin-left: -43px;
}
/* tool tip position right */
.tool-tip.right{
top: 50%;
right: auto;
left: 106%;
margin-top: -15px;
margin-right: auto;
margin-left: auto;
}
.tool-tip.right:after{
left: -5px;
top: 50%;
margin-top: -6px;
bottom: auto;
border-top-color: transparent;
border-right-color: rgba( 0, 0, 0, .7);
}
/* tool tip position left */
.tool-tip.left{
top: 50%;
left: auto;
right: 105%;
margin-top: -15px;
margin-left: auto;
}
.tool-tip.left:after{
left: auto;
right: -12px;
top: 50%;
margin-top: -6px;
bottom: auto;
border-top-color: transparent;
border-left-color: rgba( 0, 0, 0, .7);
}
/* tool tip position bottom */
.tool-tip.bottom{
top: 115%;
bottom: auto;
left: 50%;
margin-bottom: auto;
}
.tool-tip.bottom:after{
position: absolute;
top: -12px;
left: 50%;
margin-left: -7px;
content: ' ';
height: 0px;
width: 0px;
border: 6px solid transparent;
border-top-color: transparent;
border-bottom-color: rgba( 0, 0, 0, .6);
}
/* tooltip on focus left and right */
.on-focus .tool-tip.left,
.on-focus .tool-tip.right{
margin-top: -19px;
}
/* on hover of element containing tooltip default*/
*:not(.on-focus):hover > .tool-tip,
.on-focus input:focus + .tool-tip{
visibility: visible;
opacity: 1;
-webkit-transition: all 240ms ease-in-out;
-moz-transition: all 240ms ease-in-out;
-ms-transition: all 240ms ease-in-out;
-o-transition: all 240ms ease-in-out;
transition: all 240ms ease-in-out;
}
/* tool tip slide out */
*:not(.on-focus) > .tool-tip.slideIn,
.on-focus > .tool-tip{
display: block;
}
.on-focus > .tool-tip.slideIn{
z-index: -1;
}
.on-focus > input:focus + .tool-tip.slideIn{
z-index: 1;
}
/* bottom slideIn */
*:not(.on-focus) > .tool-tip.slideIn.bottom,
.on-focus > .tool-tip.slideIn.bottom{
top: 50%;
}
*:not(.on-focus):hover > .tool-tip.slideIn.bottom,
.on-focus > input:focus + .tool-tip.slideIn.bottom{
top: 115%;
}
.on-focus > input:focus + .tool-tip.slideIn.bottom{
top: 100%;
}
/* top slideIn */
*:not(.on-focus) > .tool-tip.slideIn,
*:not(.on-focus) > .tool-tip.slideIn.top,
.on-focus > .tool-tip.slideIn,
.on-focus > .tool-tip.slideIn.top{
bottom: 50%;
}
*:not(.on-focus):hover > .tool-tip.slideIn,
*:not(.on-focus):hover > .tool-tip.slideIn.top,
.on-focus > input:focus + .tool-tip.slideIn,
.on-focus > input:focus + .tool-tip.slideIn.top{
bottom: 110%;
}
/* left slideIn */
*:not(.on-focus) > .tool-tip.slideIn.left,
.on-focus > .tool-tip.slideIn.left{
right: 50%;
}
*:not(.on-focus):hover > .tool-tip.slideIn.left,
.on-focus > input:focus + .tool-tip.slideIn.left{
right: 105%;
}
/* right slideIn */
*:not(.on-focus) > .tool-tip.slideIn.right,
.on-focus > .tool-tip.slideIn.right{
left: 50%;
}
*:not(.on-focus):hover > .tool-tip.slideIn.right,
.on-focus > input:focus + .tool-tip.slideIn.right{
left: 105%;
}<div style="width: 550px; margin: 0px auto;">
<div style="clear:both;padding:20px;"></div>
<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">
<input type="text" value="" name="try" placeholder="Tooltip right on focus" />
<div class="tool-tip slideIn right">Tool Tip</div>
</div>
<div style="clear:both;"></div>
<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">
<input type="text" value="" name="try" placeholder="Tooltip left on focus" />
<div class="tool-tip slideIn left">Tool Tip</div>
</div>
<div style="clear:both;"></div>
<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">
<input type="text" value="" name="try" placeholder="Tooltip Top on focus" />
<div class="tool-tip slideIn">Tool Tip</div>
</div>
<div style="clear:both;"></div>
<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">
<input type="text" value="" name="try" placeholder="Tooltip Bottom on focus" />
<div class="tool-tip bottom slideIn ">Tool Tip</div>
</div>
</div>
答案 1 :(得分：1)
而不是标题，您可以使用div元素。 像这样：
which awsdiv{
display:inline-block;
visibility:hidden;
}
input[type="text"]:focus~ div{visibility:visible}
注意：如果代码不起作用，我可以在jsfiddle中准备整个食谱:)快乐编码！
答案 2 :(得分：1)
有几种方法可以解决这个问题。
以下解决方案使用jquery：
$(document).ready(function() {
$("#sample").focusout(function() {
$("#tip").addClass("hidden");
})
.focusin(function () {
$("#tip").removeClass("hidden");
});
});.hidden {
visibility: hidden;
}
#tip {
background-color: yellow;
padding:2px;
text-align: center;
border-radius: 5px;
border: 1px solid gray;
display: inline;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="sample" /> <div id="tip" class="hidden">Some Useful Message</div>