Personalizar tus enlaces con una descripción emergente (tooltips)

Un tooltip (también llamada descripción emergente) es una especie de ayuda visual, que funciona al situar el cursor sobre algún enlace (imagen, icono o cualquier otro elemento), mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Los tooltip son una variación de los globos de ayuda y es un complemento muy usado en programación y diseño, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.

La idea de la información sobre herramientas provino de Microsoft como Microsoft Word. Tenía y tiene una barra de herramientas donde se mueves el puntero del ratón sobre los botones y te muestran los tooltips.

Si por ejemplo, tenemos un icono o un botón, que tiene el texto insuficiente o ninguno en absoluto, o si sólo necesitas alguna explicación adicional, entonces seguramente necesitas una información presentada con estilo tooltip. Por lo que se ha demostrado hasta ahora, esta información adicional puede ayudarte a mejorar la usabilidad.

En el artículo Customize Your Anchor Link Tooltips Using This Tutorial, editado por 1stwebdesigner.com, nos explica cómo se puede crear estos tipos de llamadas usando solamente CSS, y lo hace con todo tipo de detalle y por supuesto nos proporciona todo lo necesario en cuanto a la codificación (CSS3 y HTML) para construir una herramienta de ese tipo, con un elemento span.

Puedes ver una demostración real del invento para que te hagas una idea, ya que "una imagen vale más que mil palabras".

Tooltip

 

Artículos relacionados