You are currently browsing the tag archive for the ‘title’ tag.

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

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevos mensajes por correo.

Únete a otros 50 seguidores

Archivos

mayo 2018
L M X J V S D
« Abr    
 123456
78910111213
14151617181920
21222324252627
28293031  
Anuncios