Html 鼠标悬停时，仅为特定文本字段提供工具提示

我有一个文本字段，在鼠标悬停时，我需要得到一些工具提示，我使用一些css创建的，很好。但这里的问题是，我只需要一些特定的文本字段，而不是所有的文本字段。 我怎样才能做到这一点。 有人能帮我吗

请找到JSFIDLE，现在可以获得两个文本字段的工具提示。但是只需要一个

谢谢

谢谢你的回答。我在得到问题的地方补充了一些

我有另一个文本字段，其中有日期选择器。现在由于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>

下面是该项目的屏幕截图

---

由于基于JSFIDLE的css for tooltip（工具提示）

工具提示是由

..

元素创建的，因此如何防止出现这种情况。您可以删除此

span

以删除此工具提示：

span:before{
内容：“；
边框样式：实心；
边框宽度：0 15px 15px 15px；
边框颜色：透明rgba（0102255，.5）透明；
身高：0；
位置：绝对位置；
顶部：-17px；
宽度：0；
}
跨度{
背景色：rgba（0102255，.15）；
边框：2个实心rgba（0102255.5）；
边界半径：10px；
颜色：#000；
显示：无；
填充：10px；
位置：相对位置；
}
输入{
显示：块
}
输入：悬停+跨距{
显示：内联块；
利润率：10px 0 0 10px
}

里面有些文字。。。

在我的例子中，只需添加一个数据属性，如

data show=“tooltip”

，就可以做到这一点，也可以使用任何类来实现这一点

请看下面的代码片段：

。工具提示容器span:before{
内容：“；
边框样式：实心；
边框宽度：0 15px 15px 15px；
边框颜色：透明rgba（0102255，.5）透明；
身高：0；
位置：绝对位置；
顶部：-17px；
宽度：0；
}
.工具提示容器跨度{
背景色：rgba（0102255，.15）；
边框：2个实心rgba（0102255.5）；
边界半径：10px；
颜色：#000；
显示：无；
填充：10px；
位置：相对位置；
}
.工具提示容器输入{
显示：块
}
/*使用数据属性或类并应用悬停条件*/
.tooltip容器输入[data show=“tooltip”]：悬停+span{
显示：内联块；
利润率：10px 0 0 10px
}

里面有些文字。。。
请输入

我需要第二个文本字段的跨距。如果不删除，请检查答案的第二部分谢谢@Dekel。我用另一个问题编辑了我的问题……你能看一下并帮我回答一下吗？最好接受/投票这个问题并为新问题打开一个新问题如果你在我的答案中使用第二个示例，这将不会happenAdd span tag仅在必填输入字段后添加。谢谢@Saurav..我用另一个问题编辑了我的问题..你能看一下并提供帮助吗me@HVarma如果将

数据属性

或任何其他类与textfield一起使用，则不会出现此问题。包含在某个类的一个div下具有工具提示的所有

s。比如：

…

。希望你得到它。