在鼠标悬停时，仅将工具提示提供给特定文本字段

Question

我有一个文本字段，在鼠标悬停时我需要获得某种工具提示，我使用一些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

Answer 1

根据您的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>

Answer 2

你可以通过在我的情况下添加像data-show="tooltip"这样的数据属性来实现这一点，或者你也可以使用任何类。

请看下面的代码：

.tooltip-container 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;
        }

.tooltip-container 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;
        }

.tooltip-container input {
            display: block
        }
        
        /* Use a data-attribute or class and apply hover conditions */
.tooltip-container input[data-show="tooltip"]:hover + span {
            display: inline-block;
            margin: 10px 0 0 10px
        }

<div class="tooltip-container">
  <input type="text" data-show="tooltip">
  <span>Some Text inside... </span>
  <input type="text"><!--dont need on hover for this text field-->
  <span>please enter </span> 
</div>

希望这有帮助！