Question

我有一个输入文本框，当用户的鼠标越过它时，我想在其上显示一些文本区域，向他提供要输入的文本的信息。这是我的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>

哪种CSS技巧有助于实现这一目标？提前谢谢你的帮助。

Answer 1

您可以使用CSS完成所有这些操作。使用工具提示的CSS三角形，但您主要寻找的是使用:hover伪类。不需要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;
}

http://jsfiddle.net/v8xUL/1/

Answer 2

您可以使用Jquery工具提示：

Jquery Tooltip

Answer 3

还有一种方法可以做到这一点......

Filldle Demo

对我来说，在IE8中确定DEMO

<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
}

Answer 4

* 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

      });

到达此链接http://jquerytools.org/demos/tooltip/form.html

Answer 5

试试这个属性它是asp但可能适用于您的情况

ErrorMessage =“您的留言”;

鼠标悬停在输入文本框上时显示一些文本

5 个答案: