Softonic

Generador de Tooltips CSS

Paso 1 / 2
Siguiente

Los tooltips son a menudo el primer lugar al que un proyecto recurre a una biblioteca de JavaScript, pero un simple pseudo-elemento ::after impulsado por un atributo data-tooltip cubre el 90% de los casos reales. Este generador produce las reglas exactas .tooltip y .tooltip::after que necesitas: elige la posición superior, inferior, izquierda o derecha, ajusta el color de fondo y del texto, y copia el bloque en tu hoja de estilos.

Cómo integrar el tooltip en tu HTML

  1. 1

    Elige una posición

    Superior, inferior, izquierda o derecha. El generador utiliza `calc(100% + 8px)` más la transformación adecuada para que el globo se ajuste perfectamente al disparador.

  2. 2

    Elige colores

    El fondo impulsa el globo, el color del texto se aplica a la etiqueta del tooltip. Mantén el contraste en 4.5:1 o mejor para la legibilidad.

  3. 3

    Copia el CSS

    Pega el bloque generado en tu hoja de estilos. Proporciona `.tooltip`, `.tooltip::after` y una regla `:hover`.

  4. 4

    Marca el disparador

    Agrega `class="tooltip" data-tooltip="Tu texto"` a cualquier elemento. El `::after` lee el atributo a través de `content: attr(data-tooltip)`.

Tooltips en CSS puro: lo que ganas y lo que sacrificas

Un tooltip solo en CSS es pequeño, rápido y funciona con JavaScript deshabilitado. Sin embargo, vive dentro del orden fuente del DOM y, por lo tanto, hereda algunas limitaciones que necesitas diseñar alrededor.

Lo que hace el CSS generado

  • Establece el disparador en position: relative para que el tooltip absoluto esté anclado a él.
  • Extrae la etiqueta de content: attr(data-tooltip), lo que significa que nunca duplicas el texto.
  • Anima la opacidad con transition: opacity 0.15s, por lo que la aparición se siente rápida pero no abrupta.
  • Usa pointer-events: none en el globo para que nunca bloquee clics en el disparador.

Matemáticas de posicionamiento

Posición Regla de desplazamiento
arriba bottom: calc(100% + 8px); left: 50%; translateX(-50%)
abajo top: calc(100% + 8px); left: 50%; translateX(-50%)
izquierda right: calc(100% + 8px); top: 50%; translateY(-50%)
derecha left: calc(100% + 8px); top: 50%; translateY(-50%)

Advertencias de accesibilidad

  • data-tooltip no es leído por lectores de pantalla. Si la información es esencial, combínalo con aria-label o texto visible.
  • Los usuarios de teclado necesitan :focus-visible así como :hover. Extiende la regla generada a .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Los tooltips recortados por overflow: hidden en un ancestro desaparecerán. Mueve el disparador fuera del contenedor de recorte o cambia a un popover renderizado por JS para interfaces densas.

Preguntas frecuentes

Un pseudo-elemento mantiene el DOM limpio, evita duplicar el texto de la etiqueta y te permite estilizar el tooltip sin preocuparte por coincidir accidentalmente con otros elementos. El costo es que el contenido de ::after no puede ser indexado por tecnología asistiva, así que refuerza el texto crítico con aria-label.

Sí, agrega un segundo pseudo-elemento, por ejemplo .tooltip::before, modelado con un cuadro de ancho/alto cero y bordes coloreados. Es un truco clásico de triángulo CSS; el Generador de Triángulos CSS en esta suite produce las declaraciones de borde exactas que necesitas.

Agrega transition-delay: 0.3s a la regla ::after pero restablece a cero al salir del hover, o usa transition: opacity 0.15s 0.3s; para retrasar la aparición sin retrasar la desaparición.

La posición y los colores que eliges se envían a nuestro servidor para generar el CSS, pero no se almacenan ni se reutilizan. En la vista de varios pasos viajan en el enlace entre pasos; en la vista de una sola página no se conserva nada.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Herramienta disponible en otros idiomas