Adding a tooltip to an input box

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

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

<input type="name" placeholder="First Name" title="First Name" />

title="First Name" solves my proble. it worked with bootstrap.

If you are using bootstrap (I am using version 4.0), feel free to try the following code.

<input data-toggle="tooltip" data-placement="top" title="This is the text of the tooltip" value="44"/>

data-placement can be top, right, bottom or left

Apart from HTML 5 data-tip You can use css also for making a totally customizable tooltip to be used anywhere throughout your markup.

/* ToolTip classses */ 
.tooltip {
    display: inline-block;    
}
.tooltip .tooltiptext {
    margin-left:9px;
    width : 320px;
    visibility: hidden;
    background-color: #FFF;
    border-radius:4px;
    border: 1px solid #aeaeae;
    position: absolute;
    z-index: 1;
    padding: 5px;
    margin-top : -15px; 
    opacity: 0;
    transition: opacity 0.5s;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 5%;
    right: 100%;  
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #aeaeae transparent transparent;
}


.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

<div class="tooltip">
  <input type="text" />
  <span class="tooltiptext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </span>
</div>