Los tooltips son estás pequeñas etiquetas emergentes que se muestran cuando el cursor del ratón queda parado durante unos instantes encima de un componente visual de una ventana. Son muy prácticos para suministrar una información adicional relacionada a este componente.

En HTML es fácil crear un tooltip con el atributo title. El atributo title es válido para todos los elementos de HTML, por lo cual se puede poner un tooltip a absolutamente todo. Con el elemento SPAN es incluso posible añadir un tooltip a un texto sin más.

Por ejemplo, el código de HTML


Soy una <SPAN title="Soy un tooltip">prueba de tooltip</SPAN>.

aparece en el navegador como en la imagen.

Ejemplo de tooltip en HTML

La etiqueta con la frase “Soy un tooltip” emergió porque, durante unos instantes, dejé el cursor parado encima del contenido del elemento SPAN, la expresión “prueba de tooltip”.

Mediante hojas de estilo puedo crear un tooltip más sofisticado que aprovecha la característica hover del elemento A. Cómo sólo este elemento tiene esta característica, debo incluir cualquier objeto con este tipo de tooltip en un elemento A.


Soy otra <A class="mi_hover">prueba de tooltip</A>.

Lógicamente debo definir la clase de estilo mi_hover de forma apropiada. Como se puede observar, el elemento A no tiene el atributo href, por lo cual no es un enlace.

Una tercera manera de crear tooltips es mediante los eventos OnMouseOver y OnMouseOut. Estos eventos pueden llamar a funciones de Javascript que pueden hacer aparecer de todo. Es la forma más compleja de hacer un tooltip pero también la más completa.

Referencias

Anuncios