Ejemplo para crear un tooltip con CSS

-

Los tooltips son mensajes emergentes que aparecen cuando el usuario pasa el cursor sobre un elemento. Son útiles para proporcionar información adicional sin sobrecargar la interfaz. En este artículo, aprenderás cómo crear un tooltip simple usando solo HTML y CSS, sin necesidad de JavaScript.

Paso 1: Estructura HTML

Primero, crearemos la estructura HTML básica. Usaremos un span como el elemento que activará el tooltip y un div como contenedor del texto del tooltip.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Tooltip con CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tooltip-container">
        <span class="tooltip-trigger">Pasa el cursor aquí</span>
        <div class="tooltip-text">Este es un ejemplo de tooltip</div>
    </div>
</body>
</html>

En este caso:

  • tooltip-container es el contenedor principal.
  • tooltip-trigger es el texto o elemento que activará el tooltip cuando el usuario pase el cursor.
  • tooltip-text contiene el mensaje que se mostrará en el tooltip.

Paso 2: Estilos CSS

Ahora, agregaremos el CSS para posicionar y estilizar el tooltip. Comenzaremos ocultándolo y solo lo mostraremos cuando el usuario pase el cursor sobre el elemento activador.

css
/* Estilos base */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f9;
}

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

/* Estilos del tooltip (mensaje emergente) */
.tooltip-text {
    visibility: hidden; /* Tooltip oculto por defecto */
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 4px;
    position: absolute;
    bottom: 125%; /* Posición encima del elemento */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    width: max-content;
    max-width: 200px; /* Ancho máximo */
    z-index: 1;
}

/* Flecha del tooltip */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Abajo del tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Mostrar tooltip al pasar el cursor */
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

Explicación del CSS

  • Posicionamiento del tooltip: Se usa position: absolute; para colocar el tooltip justo encima del elemento activador (bottom: 125%) y centrado horizontalmente (left: 50% con transform: translateX(-50%)).
  • Efecto de transición: Al cambiar la propiedad opacity de 0 a 1 con transition: opacity 0.3s, el tooltip aparece con un suave efecto de desvanecimiento.
  • Flecha del tooltip: Usamos el pseudo-elemento ::after para crear una pequeña flecha en la parte inferior del tooltip, apuntando hacia el elemento activador.

Paso 3: Prueba y Ajustes

Guarda el archivo styles.css y abre el archivo HTML en tu navegador. Deberías ver que al pasar el cursor sobre el texto "Pasa el cursor aquí", aparece el tooltip con un mensaje adicional.

Personalización del Tooltip

Aquí tienes algunas ideas para personalizar el tooltip:

  1. Color de fondo y texto: Cambia background-color y color en .tooltip-text para que coincidan con la paleta de tu sitio web.
  2. Efectos de entrada y salida: Prueba diferentes transiciones, como transform: scale() o transition: all, para animaciones más elaboradas.
  3. Posición: Modifica las propiedades bottom, top, left, o right en .tooltip-text para cambiar la posición del tooltip respecto al elemento activador.

Resultado Final

Con este código, has creado un tooltip funcional y personalizado usando solo HTML y CSS. Este tipo de tooltip es muy útil y ligero, ideal para añadir pequeñas indicaciones o descripciones en tu sitio web sin recurrir a JavaScript.

Comentarios

Publicar un comentario