etiquetas - title html5

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

Question

Estoy usando la biblioteca CSS.Tooltips para intentar obtener una información sobre herramientas para mostrar una etiqueta de entrada. Puedo hacer que funcione en una etiqueta ap pero no en una etiqueta de entrada. ¿Algunas ideas?

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

Answer 1

Además de los datos de HTML 5, puede usar css también para hacer una información sobre herramientas totalmente personalizable para usarla en cualquier lugar a lo largo de su marca.

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

Answer 2

Parece ser un error, funciona para todo tipo de entrada que no sea un 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

Answer 3

Sé que esta es una pregunta con respecto a la biblioteca CSS.Tooltips. Sin embargo, para cualquier otra persona que vino aquí como resultado de la búsqueda de Google "información sobre herramientas para el cuadro de entrada" como lo hice, esta es la forma más simple:

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