当鼠标悬停在输入文本框上时显示一些文本
[英]Displaying some text when mouse is over an input text box
问题描述
I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter. 
我有一个输入文本框，当用户的鼠标悬停在该文本框上时，我想在该文本框上显示一些文本区域，向他提供有关要输入的文本的信息。 here is my HTML code : 这是我的HTML代码：
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ? 什么是最好的CSS技巧将有助于做到这一点？ Thank you for help in advance. 预先感谢您的帮助。
5 个解决方案
解决方案1
5 已采纳 2014-01-17 09:12:04
You can do all of this with CSS. 您可以使用CSS完成所有这些操作。 Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. 使用CSS三角形作为工具提示，但是您主要要使用的是:hover伪类。 No need for Javascript. 不需要Javascript。
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
解决方案2
2 2014-01-17 09:04:53
You can use Jquery Tooltip: 您可以使用Jquery工具提示：
解决方案3
1 2014-01-17 09:38:42
Just one more way to do that... 只是另一种方法...
For me in IE8 OK DEMO 对于我在IE8中可以演示
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}
解决方案4
0 2014-01-17 09:05:30
* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html 到达此链接http://jquerytools.org/demos/tooltip/form.html
解决方案5
0 2014-01-17 09:28:09
Try this property it's asp but may work for your case 试试这个属性，它是asp，但可能适合您的情况
ErrorMessage="Your Message"; ErrorMessage =“您的消息”;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.