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:

<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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 7

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

2 comentarios en “Cómo mostrar texto emergente al pasar el cursor sobre una palabra”

  1. 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?

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido