En este artículo vamos a ver cómo crear un globo de texto o tooltip. Normalmente esta técnica se utiliza para añadir información adicional al pasar el ratón sobre una palabra o elemento HTML.
En HTML existe el atributo global «title» que pemite mostrar un tooltip con un texto descriptivo si se lo añadimos a elementos como un acrónimo <abbr>, un enlace <a> o una imagen <img>, entre otros.
Esto es útil para mejorar el SEO de nuestra web pero a veces queremos añadir contenido extra de información con otros propósitos y para ello debemos utilizar CSS.
Vamos a ver las diferentes formas de implementar nuestros tooltips y globos de texto.
Crear tooltip con atributo «title»
En las etiquetas HTML donde añadimos el atributo global «title», éste se utiliza para mostrar información relacionada con su elemento. Proporciona una forma semántica de identificar y dar significado al elemento, permitiendo que los navegadores y otros agentes de usuario muestren información adicional cuando el usuario interactúa con ellas.
La sintaxis básica para añadir el atributo «title» a un elemento HTML es la siguiente:
<abbr title="Organización de la Naciones Unidas">ONU</abbr>
<a title="Blog de programación " href="https://fashehlabs.com">Fasheh Labs</a>
<img title="Logo de Gestor Ligas" src="https://gestorligas.com/logos/logo1.jpg" />
<p title="Un párrafo tambien admite title">Párrafo de texto</p>El atributo «title» contiene una pequeña descripción de su elemento HTML, que generalmente se muestra como un tooltip de información adicional cuando se pasa el cursor sobre ella.
El uso adecuado de la etiqueta «title» ayuda a mejorar la accesibilidad y comprensión del contenido, ya que permite a los usuarios obtener información adicional sobre los elementos HTML utilizados en la página.
Esto es útil para el SEO, pero hay que ser lógicos y no abusar de ello. Si añadimos un «title» a TODOS nuestros elementos HTML Google puede ver un uso malintencionado que nos perjudicará. Además este tooltip se genera de forma automática por el navegador y no podemos hacer mucho más con él.
Sin embargo, hay técnicas que permiten añadir texto de una forma más elegante, mostrando el contenido de nuestra página HTML, pero sólo cuando se interactua con él.
Podemos encontrar este tipo de contenido en las secciones FAQ (preguntas más frecuentes) donde aparece la respuesta al hacer clic en la pregunta, en secciones saber más … etc.
Esta forma de mostrar contenido es similar a mostrar un globo de texto con CSS, vamos a ver cómo funciona.
Crear globo de texto con CSS
Para crear nuestro globo de texto o tooltip con CSS debemos utilizar una clase, por ejemplo tooltip y dos subelemento como <em> y <span> para generar el «disparador» del globo con la información adicional. Vamos a verlo con un sencillo ejemplo.
El HTML
<p>Esto es un párrafo de <em class="tooltip">texto<span>Este es el globo de texto</span></em> con información adicional que se muestra al pasar sobre la palabra.</p>El CSS
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip > span {
visibility: hidden;
background-color: #000;
color: #fff;
padding: 5px;
border-radius: 3px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.tooltip:hover > span {
visibility: visible;
}En este ejemplo, hemos utilizado una estructura HTML, donde el «disparador» es la palabra texto la cual hemos encapsulado dentro de una etiqueta de énfasis junto a la clase tooltip.
Su estructura básica es la siguiente y la podemos añadir a cualquier elemento HTML de tipo contenedor como <p> o <div> creando diferentes globos de texto a lo largo de nuestra página web.
<em class="tooltip">disparador<span>Globo de texto</span></em>En el CSS, hemos establecido la clase .tooltip para tener una posición relativa y un cursor de puntero respecto a nuestro elemento disparador <em>. Luego, utilizamos la pseudoclase :hover para controlar la visibilidad del <span> dentro del elemento .tooltip.
El estilo del <span> se establece con position: absolute para posicionarse correctamente con respecto a su elemento padre, que es el <em class=»tooltip»>. Utilizamos bottom: 100% para alinear el borde inferior del <span> justo encima del texto «texto», y left: 50% junto con transform: translateX(-50%) para centrar horizontalmente el <span> con respecto a su contenedor. Además, se aplican estilos de diseño de tooltip como fondo, color, relleno y bordes redondeados.
Cuando se pasa el ratón sobre el elemento .tooltip, el <span> dentro de él se vuelve visible (visibility: visible), mostrando así el contenido adicional.
Si prefieres utilizar otro elemento en vez de <span> como globo de texto puedes modificar el CSS subsituyendo span por otro elemento. O incluso, puedes utilizar el símbolo * para que se adapte a cualquier otro elemento.
También puedes ajustar los estilos según tus preferencias para lograr el aspecto y posición deseados del globo de texto. Este solo es un ejemplo básico que puedes personalizar según tus necesidades y estilos de diseño.
¡ Espero que este artículo sea de vuestro interés !