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.

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

Pasos para crear tooltips en CSS

Puedes crear un tooltip utilizando CSS y HTML siguiendo estos pasos:

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

0

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. Aquí tienes los pasos para lograrlo:

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.