當鼠標懸停在輸入文本框上時顯示一些文本

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工具提示

Answer 3

只是另一種方法...

圓角演示

對於我在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
}

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 個解決方案

解決方案1
5 已采納 2014-01-17 09:12:04

解決方案2
2 2014-01-17 09:04:53

解決方案3
1 2014-01-17 09:38:42

解決方案4
0 2014-01-17 09:05:30

解決方案5
0 2014-01-17 09:28:09

當鼠標懸停在輸入文本框上時顯示一些文本

問題描述

5 個解決方案

解決方案1 5 已采納 2014-01-17 09:12:04

解決方案2 2 2014-01-17 09:04:53

解決方案3 1 2014-01-17 09:38:42

解決方案4 0 2014-01-17 09:05:30

解決方案5 0 2014-01-17 09:28:09

解決方案1
5 已采納 2014-01-17 09:12:04

解決方案2
2 2014-01-17 09:04:53

解決方案3
1 2014-01-17 09:38:42

解決方案4
0 2014-01-17 09:05:30

解決方案5
0 2014-01-17 09:28:09