Adding a tooltip to an input box

Question

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?

Here is link to the fiddle: http://jsfiddle.net/cwlanca/BumU5/1/

Code

[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; }

<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"/>

Answer 1

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:

<input title="This is the text of the tooltip" value="44"/> 

Answer 2

It seems to be a bug, it work for all input type that aren't textbox (checkboxes, radio,...)

There is a quick workaround that will work.

<div data-tip="This is the text of the tooltip2">     <input type="text" name="test" value="44"/> </div> 

JsFiddle