向输入框中添加工具提示 [英] Adding a tooltip to an input box
本文介绍了向输入框中添加工具提示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用CSS.Tooltips库尝试获取一个工具提示显示在输入标签上。我可以让它工作在一个p标签,但不是一个输入标签。任何想法?
I am using the CSS.Tooltips library to try an get a tooltip to show up on an input tag. I can get it to work on a p tag but not an input tag. Any ideas?
这里是小提琴的链接: http:// jsfiddle.net/cwlanca/BumU5/1/
Here is link to the fiddle: 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;
}
推荐答案
,它适用于不是文本框的所有输入类型(复选框,收音机,...)
It seems to be a bug, it work for all input type that aren't textbox (checkboxes, radio,...)
有一个快速的解决方法可以工作。
There is a quick workaround that will work.
<div data-tip="This is the text of the tooltip2">
<input type="text" name="test" value="44"/>
</div>
这篇关于向输入框中添加工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文