Ir al contenido principal

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.

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

¿Para qué sirve el comando python manage.py collectstatic en Django?

El comando python manage.py collectstatic en Django se utiliza para recopilar y organizar todos los archivos estáticos de tu proyecto en una sola ubicación central, conocida como STATIC_ROOT . Esto es particularmente útil en producción, donde los archivos estáticos necesitan estar en un lugar accesible para el servidor web (como Apache o Nginx) en lugar de ser servidos directamente por Django. ¿Por qué es importante collectstatic ? Cuando trabajas en un proyecto Django, puedes tener archivos estáticos (CSS, JavaScript, imágenes, etc.) en múltiples ubicaciones, especialmente si usas varias aplicaciones de Django. Durante el desarrollo, Django maneja estos archivos estáticos automáticamente cuando DEBUG = True . Sin embargo, en un entorno de producción, Django recomienda no servir archivos estáticos directamente, ya que esto podría ser ineficiente y, en algunos casos, inseguro. collectstatic resuelve este problema al: Agrupar todos los archivos estáticos : Combina archivos de todas las...
Publicar un comentario
Sigue leyendo »

Ejemplo para centrar un elemento en CSS

Centrar un elemento es una de las primeras cosas que los desarrolladores novatos desean aprender en CSS, y por una buena razón: centrar un elemento le da simetría y orden a la página. En este artículo, exploraremos cómo centrar un elemento en CSS, tanto en el eje horizontal como en el vertical, y para diferentes tipos de elementos, como un texto, una imagen o un div. 1. Centrado Horizontal de Texto Para centrar texto dentro de un contenedor, puedes usar la propiedad text-align en el elemento contenedor. css .contenedor { text-align : center; } html < div class = "contenedor" > < p > Este texto está centrado horizontalmente. </ p > </ div > En este ejemplo, aplicamos text-align: center; al contenedor que rodea el texto, lo que alinea el texto horizontalmente en el centro. 2. Centrado de un Elemento de Bloque (Div) Horizontalmente Para centrar un elemento de bloque como un <div> , puedes usar la propiedad margin: auto; en combinación co...
Publicar un comentario
Sigue leyendo »

¿Por qué no se carga el CSS en las páginas HTML creadas con Django ni en el panel de administración?

Pregunta: ¿Por qué no se carga el CSS en las páginas HTML creadas con Django ni en el panel de administración? Al inspeccionar con F12 en el navegador, el archivo CSS muestra el mensaje Content-Type: application/x-css. Estoy ejecutando Django con runserver. El problema de que el CSS no funcione correctamente en tu proyecto de Django y que se muestre el mensaje Content-Type: application/x-css podría deberse a una configuración incorrecta de los archivos estáticos. Aquí tienes los pasos para solucionarlo: 1. Configura los archivos estáticos correctamente en tu proyecto: En tu archivo settings.py , asegúrate de tener configuradas las siguientes variables: # settings.py # Para archivos estáticos (CSS, JavaScript, imágenes) STATIC_URL = '/static/' STATICFILES_DIRS = [BASE_DIR / "static" ] # Ubicación de archivos estáticos en desarrollo Si los archivos estáticos están en una carpeta específica, asegúrate de que el directorio está bien especificado en STATICFILES_DIRS ...
Publicar un comentario
Sigue leyendo »