on mouse hover give tooltip only to a particular text field - html

Question

I had a text field where on mouse hover I need to get some kind of tool tip which I created using some css and its fine.But the issue here is I need that only to some particular text fields but not for all.
How can I do this.
Can someone help me here
Please find the jsfiddle ,right now getting tool tip for both textfields..But need only for one.
http://fiddle.jshell.net/CvtLq/203/
Thanks
Thanks for the answers..Im adding some more where Iam getting the issue..
I had another text field where it had date picker.Now because of that css,even the date picker is getting that tooltip.
<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>
Below is the screen shot of that
How can I prevent this coming because of that css for tooltip

Answer 1

Based on your jsfiddle the tooltip is created by the <span>...</span> element. You can remove this span to remove this tooltip:
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>-->
Now the tooltip is only for the first input.
Another option - add the tooltip class to the input and use this class to control which input tags show tooltip using 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

You can do this by just adding a data-attribute like data-show="tooltip" in my case, or you can use any class for the same.
Look at the snippet below:
.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>
Hope this helps!