我有一个文本字段,在鼠标悬停时我需要获得某种工具提示,这是我使用一些 css 创建的并且它很好。但这里的问题是我只需要某些特定的文本字段而不是所有的。 我怎样才能做到这一点。 有人可以帮我吗
请找到 jsfiddle,现在正在获取两个文本字段的工具提示..但只需要一个。
http://fiddle.jshell.net/CvtLq/203/
谢谢
感谢您的回答..我在遇到问题的地方添加了更多..
我有另一个文本字段,它有日期选择器。现在因为那个 css,即使是日期选择器也能得到那个工具提示。
<div class="col-lg-4">
<input class="form-control" type="datetime" date-time auto-close="true" view="date" min-view="date" maxlength="10" format="dd/MM/yyyy" placeholder="renewal date" required="true">
</div>
下面是截图
由于工具提示的 css,我怎样才能防止这种情况发生
最佳答案
根据您的 jsfiddle,工具提示由 <span>...</span>
创建元素。您可以删除此 span
删除此工具提示:
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;
}
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;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}
<input type="text">
<span>Some Text inside... </span>
<input type="text"><!--dont need on hover for this text field-->
<!--<span>please enter </span>-->
现在工具提示仅针对第一个输入。
另一个选项 - 添加 tooltip
类到输入并使用此类来控制哪个input
标签使用 input.show-tooltip:hover + span
显示工具提示:
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;
}
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;
}
input {
display: block
}
input.show-tooltip:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}
<input type="text" class="show-tooltip">
<span>Some Text inside... </span>
<input type="text"><!--dont need on hover for this text field-->
<span>please enter </span>
关于html - 在鼠标悬停时仅向特定文本字段提供工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40466692/