Html 向输入框添加工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19480010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a tooltip to an input box
提问by Lance Collins
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?
我正在使用 CSS.Tooltips 库来尝试获取一个显示在输入标签上的工具提示。我可以让它在 ap 标签上工作，但不能在输入标签上工作。有任何想法吗？
Here is link to the fiddle: http://jsfiddle.net/cwlanca/BumU5/1/
这是小提琴的链接：http: //jsfiddle.net/cwlanca/BumU5/1/
html
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
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;
}
采纳答案by Justin Lessard
回答by user227353
I know this is a question regarding the CSS.Tooltips library. However, for anyone else came here resulting from google search "tooltip for input box" like I did, here is the simplest way:
我知道这是一个关于 CSS.Tooltips 库的问题。但是，对于像我一样通过谷歌搜索“输入框工具提示”来到这里的其他人，这是最简单的方法：
<input title="This is the text of the tooltip" value="44"/>
回答by Partha Roy
Apart from HTML 5 data-tip You can use css also for making a totally customizable tooltip to be used anywhere throughout your markup.
除了 HTML 5 数据提示之外，您还可以使用 css 制作完全可定制的工具提示，以便在整个标记中的任何地方使用。
/* ToolTip classses */
.tooltip {
display: inline-block;
}
.tooltip .tooltiptext {
margin-left:9px;
width : 320px;
visibility: hidden;
background-color: #FFF;
border-radius:4px;
border: 1px solid #aeaeae;
position: absolute;
z-index: 1;
padding: 5px;
margin-top : -15px;
opacity: 0;
transition: opacity 0.5s;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 5%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #aeaeae transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}<div class="tooltip">
<input type="text" />
<span class="tooltiptext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</div>回答by Kushan Randima
If you are using bootstrap (I am using version 4.0), feel free to try the following code.
如果您使用的是引导程序（我使用的是 4.0 版），请随意尝试以下代码。
<input data-toggle="tooltip" data-placement="top" title="This is the text of the tooltip" value="44"/>
data-placementcan be top, right, bottomor left
data-placement可以是顶部、右侧、底部或左侧
回答by Tayyab Hayat
<input type="name" placeholder="First Name" title="First Name" />
title="First Name"solves my proble. it worked with bootstrap.
title="First Name"解决了我的问题。它与引导程序一起工作。
回答by dfafa
<input type="text" placeholder="specify">
This adds "specify" as tool-tip text inside the input box.
<input type="text" placeholder="specify">
这会在输入框中添加“指定”作为工具提示文本。
