Agregar una información sobre herramientas a un cuadro de entrada

Estoy usando el CSS.Biblioteca de información sobre herramientas para intentar obtener una información sobre herramientas para mostrarla en una etiqueta de entrada. Puedo hacer que funcione en una etiqueta p pero no en una etiqueta de entrada. Alguna idea?

Aquí está el enlace al violín: http://jsfiddle.net/cwlanca/BumU5/1 /

Html 

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

Css 

[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;
}
Author: Lance Collins, 2013-10-20
Source

3 answers

Parece ser un error, funciona para todos los tipos de entrada que no son cuadro de texto (casillas de verificación, radio,...)

Hay una solución rápida que funcionará.

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

JsFiddle

 29
Author: Justin Lessard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-20 16:58:10

Sé que esta es una pregunta con respecto al CSS.Biblioteca Tooltips. Sin embargo, para cualquier otra persona vino aquí como resultado de la búsqueda de Google "tooltip for input box" como lo hice, aquí está la forma más sencilla: 

<input title="This is the text of the tooltip" value="44"/>
 91
Author: user227353,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-29 17:04:25

Aparte de HTML 5 data-tip, puede usar css también para hacer una sugerencia de herramienta totalmente personalizable para ser utilizada en cualquier lugar a lo largo de su marcado.

Estilos

    /* ToolTip CSS 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; /* according to application */ 
   opacity: 0;
    transition: opacity 1s;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 5%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #aeaeae transparent transparent;
}


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

HTML

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

Codepan

 1
Author: Partha Roy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-23 06:29:37