Un recurso muy práctico en sitios técnicos o que suelen usar abreviaturas o acrónimos de términos no muy comunes es mostrar un texto emergente al pasar el cursor por la palabra o abreviatura en cuestión, para dar contexto al visitante y que no acumule malentendidos en la lectura.
Son los comúnmente conocidos (en inglés) como tooltips.
Aquí mismo, en el blog, los uso de vez en cuando, especialmente para mostrar el significado de palabras técnicas, abreviaturas no muy comunes e incluso términos en inglés.
Si tienes curiosidad y te has planteado alguna vez usar este recurso tan práctico para los visitantes de tu web aquí te explico dos maneras de hacerlo.
Índice de contenidos
Textos emergentes con HTML
El modo tradicional de mostrar textos emergentes es mediante la tag HTML abbr.
La sintaxis es muy sencilla, igual que la de los enlaces, aquí tienes un ejemplo:
<abbr title="TEXTO EMERGENTE QUE SE MOSTRARÁ AL PASAR EL CURSOR">Texto a explicar</abbr>.
Y se vería así: Texto a explicar.
Este método funcionará en todos los navegadores, solo tiene el engorro de que tienes que andar metiendo HTML a mano cada vez que quieras mostrar el texto emergente.
Textos emergentes con plugin
¿Qué te parecería programar automáticamente textos emergentes para acrónimos y abreviaturas que uses habitualmente y no tener que añadir HTML cada vez que los uses?
Pues hay un plugin que te ayudará en esta tarea. Se llama Text Hover y es muy fácil de utilizar, además de disponer de algunas opciones muy útiles.
Una vez activo pásate por su página de ajustes (Ajustes > Text Hover) y utiliza el área de texto para añadir aquellos términos de los que quieras mostrar automáticamente un texto explicativo emergente.
La sintaxis a utilizar es muy sencilla, por ejemplo:
WP => Abreviatura de WordPress - El mejor sistema de publicación web
Solo tienes que ir añadiendo líneas, siguiendo el modelo, con tus términos, acrónimos y abreviaturas, seguidos tras el => del texto emergente que quieras mostrar al visitante cuando pase el cursor sobre el término, que se mostrará en tu texto con un subrayado punteado, para distinguirlo del resto del texto.
Las únicas reglas que hay son:
- No uses más de una línea por mensaje emergente de sustitución.
- Puedes usar etiquetas HTML básicas (href, strong, img, etc.) pero no te pases, recuerda que es un texto emergente, no una ficha de producto ni nada parecido.
Muy recomendable activar la casilla para mejorar el aspecto de los textos emergentes, mucho más fácil de leer que el sistema nativo de los navegadores.
Se vería así…
A partir de este momento solo te queda la tarea de ir alimentando de términos, acrónimos, abreviaturas, etc., con sus textos emergentes, los ajustes del plugin.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
¡¡Muchas gracias!!
Me sirvió bastante
Excelente, era lo que buscaba.
Estoy intentando que no salga la línea de puntitos debajo del enlace «……………» con abbr pero no lo consigo, ¿alguna sugerencia?