Cómo mostrar texto emergente al pasar el cursor sobre una palabra

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.

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:

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:

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 5)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

Autor: Fernando Tellado

Fernando Tellado es un apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido