我正在使用CSS.Tooltips库来尝试获取一个工具提示来显示输入标签.我可以让它工作在一个p标签,但不是输入标签.有任何想法吗？
这是链接到小提琴：http://jsfiddle.net/cwlanca/BumU5/1/
HTML
<p data-tip="This is the text of the tooltip">This is a paragraph of text that has a tooltip.</p> </br> </br> </br> <input data-tip="This is the text of the tooltip" value="44"/>
CSS
[data-tip] {
position:relative;
}
[data-tip]:before {
content:'';
/* hides the tooltip when not hovered */
display:none;
content:'';
display:none;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1a1a1a;
position:absolute;
top:30px;
left:35px;
z-index:8;
font-size:0;
line-height:0;
width:0;
height:0;
position:absolute;
top:30px;
left:35px;
z-index:8;
font-size:0;
line-height:0;
width:0;
height:0;
}
[data-tip]:after {
display:none;
content:attr(data-tip);
position:absolute;
top:35px;
left:0px;
padding:5px 8px;
background:#1a1a1a;
color:#fff;
z-index:9;
font-size: 0.75em;
height:18px;
line-height:18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space:Nowrap;
word-wrap:normal;
}
[data-tip]:hover:before,[data-tip]:hover:after {
display:block;
}
解决方法
这似乎是一个错误,它适用于所有不是文本框的输入类型(复选框,收音机,…)
有一个快速的解决方法将工作.
<div data-tip="This is the text of the tooltip2">
<input type="text" name="test" value="44"/>
</div>
JsFiddle