Tooltip en CSS: Pasos para crear tooltips

Un tooltip es una pequeña ventana emergente que se muestra cuando el usuario coloca el cursor sobre un elemento. Proporciona información adicional o aclaratoria sobre el elemento al que está asociado, sin ocupar mucho espacio en la página. El tooltip suele aparecer cerca del elemento objetivo y desaparece cuando el cursor se mueve fuera de él.

1. Tooltip en CSS

El contenido de un tooltip puede ser texto, imágenes u otros elementos HTML. Se utiliza comúnmente para proporcionar descripciones breves, etiquetas o indicaciones sobre la función o el propósito de un elemento en particular, como enlaces, botones o imágenes. Los tooltips son una forma efectiva de mejorar la usabilidad y la experiencia del usuario al proporcionar información adicional de manera contextual y discreta. Ejemplo:

Aquí puedes ver un tooltip

2. Crear un tooltip por defecto mediante la etiqueta <abbr>

Si hiciste el tutorial de las etiquetas HTML, puedes recordar que <abbr> tiene un atributo llamado title que puedes usar para mostrar un tooltip por defecto. El tooltip que se muestra usando a etiqueta <abbr> es un tooltip predeterminado proporcionado por el navegador, y no se puede personalizar con CSS. El navegador controla el estilo de estos tooltips, por lo que no puedes cambiar el color de fondo, la fuente, la forma, etc.

Ejemplo en CodePen

<abbr title="HyperText Markup Language">HTML</abbr>

3. Pasos para crear tooltips personalizados en CSS

Para crear un tooltip utilizando solo CSS y HTML, puedes hacerlo posicionando un contenedor que contenga el texto del tooltip y ocultándolo por defecto. Cuando el usuario pasa el ratón sobre el texto principal, ese contenedor se hace visible. Esto se consigue aplicando estilos CSS con la propiedad visibility u opacity para manejar la visibilidad del tooltip.

El contenedor del tooltip se coloca como un elemento hijo del texto objetivo, de modo que el tooltip se posicione relativo al elemento que lo activa. Con la propiedad position: absolute, el tooltip se puede ubicar arriba, abajo o a un lado del texto según sea necesario.

Al definir el tooltip como visibility: hidden o opacity: 0 por defecto, y hacer que cambie a visible u opacity: 1 cuando el texto está en estado hover, puedes lograr un efecto elegante sin necesidad de JavaScript.

Este enfoque te permite personalizar completamente el estilo del tooltip utilizando CSS, incluyendo colores, formas, tamaño y animaciones de entrada y salida.

Veamos los pasos detallados para crear un tooltip utilizando CSS y HTML:

1. Crea la estructura HTML para el elemento que tendrá el tooltip. Por ejemplo, puedes usar un elemento <span> dentro de un elemento con una clase específica.

   <div class="tooltip-container">
     <span class="tooltip-text">Este es un tooltip</span>
     Mi elemento
   </div>

2. Estiliza el contenedor del tooltip y el texto del tooltip en tu archivo CSS. Puedes ajustar los estilos según tus preferencias.

   .tooltip-container {
     position: relative;
     display: inline-block;
   }

   .tooltip-text {
     visibility: hidden;
     width: 120px;
     background-color: #000;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 5px;
     position: absolute;
     z-index: 1;
     bottom: 125%; /* Posiciona el tooltip encima del elemento */
     left: 50%;
     transform: translateX(-50%);
     opacity: 0;
     transition: opacity 0.3s;
   }

3. Agrega una regla CSS para mostrar el tooltip cuando se pasa el cursor sobre el elemento. Puedes utilizar el selector :hover para lograrlo.

   .tooltip-container:hover .tooltip-text {
     visibility: visible;
     opacity: 1;
   }

Con estos pasos, has creado un tooltip básico con CSS. Puedes personalizar los estilos y añadir efectos adicionales según tus necesidades. Además, también puedes utilizar JavaScript para crear tooltips más avanzados con funcionalidades adicionales.

Ejemplo en CodePen

4. Crear un tooltip en diferentes posiciones

Para crear un tooltip que se muestre en diferentes posiciones, como encima, a la derecha, abajo y a la izquierda, puedes ajustar las propiedades de posicionamiento en CSS. Veamos los pasos a seguir:

1. Asegúrate de tener la estructura HTML básica del tooltip, como se explicó anteriormente.
2. Agrega las siguientes reglas CSS para cada posición del tooltip:

• Para el tooltip encima del elemento:

   .tooltip-text {
     bottom: 100%; /* Cambia el valor según sea necesario */
     left: 50%;
     transform: translateX(-50%);
   }

• Para el tooltip a la derecha del elemento:

   .tooltip-text {
     top: 50%;
     left: 100%; /* Cambia el valor según sea necesario */
     transform: translateY(-50%);
   }

• Para el tooltip abajo del elemento:

   .tooltip-text {
     top: 100%; /* Cambia el valor según sea necesario */
     left: 50%;
     transform: translateX(-50%);
   }

• Para el tooltip a la izquierda del elemento:

   .tooltip-text {
     top: 50%;
     right: 100%; /* Cambia el valor según sea necesario */
     transform: translateY(-50%);
   }

3. Asegúrate de ajustar las propiedades width, background-color, color, border-radius, padding y cualquier otro estilo que desees para que coincidan con el diseño de tu tooltip.

Con estos ajustes, el tooltip se posicionará correctamente en la dirección deseada según las reglas CSS proporcionadas.