Generador de tooltips CSS
Crea un tooltip sin JavaScript: elige el lado, la flecha, los colores, el tamaño y la animación, míralo en vivo y copia un HTML y un CSS limpios. Elige una versión ligera con el atributo data-tooltip o una versión accesible con role="tooltip" y aria-describedby.
Última actualización:
Posición y flecha
Animación
Estilo de la burbuja
Cómo usar Generador de tooltips CSS
- Elige un tema como Oscuro, Claro o Marca.
- Elige la posición (arriba, derecha, abajo o izquierda) y el tamaño de la flecha.
- Da estilo a la burbuja: colores, relleno, radio de las esquinas, tamaño de fuente, ancho máximo y distancia al elemento.
- Configura la animación y un retardo opcional, y luego pasa el ratón o usa Tab sobre el botón de vista previa (desmarca Fijar para probarlo).
- Copia el HTML y el CSS y cambia el texto del tooltip en tu marcado.
Dos formas de crear un tooltip CSS
| Elemento hijo + role="tooltip" | Atributo data-tooltip | |
|---|---|---|
| Marcado | Span contenedor, disparador y un span para el tooltip | Un atributo en el disparador |
| Contenido del tooltip | Cualquier HTML (texto en negrita; no se recomiendan enlaces) | Solo texto plano, mediante content: attr(data-tooltip) |
| Lectores de pantalla | Se anuncia como descripción mediante aria-describedby | El texto del pseudoelemento se lee de forma inconsistente |
| Se muestra con | :hover y :focus-within | :hover y :focus-visible |
| Ideal para | Pistas importantes, botones de icono, formularios | Pistas decorativas rápidas en prototipos |
Cómo funciona el posicionamiento
El disparador (o su contenedor) recibe position: relative y la burbuja se posiciona de forma absoluta respecto a él. Para un tooltip arriba, la burbuja usa bottom: calc(100% + distance) y left: 50% con transform: translateX(-50%) para centrarla. width: max-content mantiene las etiquetas cortas en una sola línea, mientras que max-width divide las largas.
La flecha es un triángulo CSS: un pseudoelemento de tamaño cero con un borde transparente y un lado de color. Un borde de n píxeles da un triángulo de 2n de ancho y n de alto. El generador suma el tamaño de la flecha al desplazamiento de la burbuja para que la distancia que fijas se mida desde el elemento hasta la punta de la flecha.
Buenas prácticas para tooltips
- Mantén los tooltips cortos (de unas pocas palabras a una frase) y nunca pongas información esencial solo en un tooltip, porque las pantallas táctiles no tienen hover.
- Muestra el tooltip con el foco del teclado además de al pasar el ratón; el CSS generado hace ambas cosas.
- Un pequeño retardo de aparición (100–300 ms) evita que los tooltips parpadeen cuando el puntero solo pasa por encima del elemento.
- Comprueba el contraste del texto: procura al menos 4.5:1 entre el texto del tooltip y el fondo.
- Evita contenido interactivo como enlaces dentro de los tooltips; usa un popover o un diálogo para eso.
Preguntas frecuentes
¿Cómo hago un tooltip solo con CSS?
Posiciona el tooltip de forma absoluta dentro de un elemento con posición relativa y ocúltalo con opacity: 0 y visibility: hidden. En :hover y :focus-visible (o :focus-within), establece opacity: 1 y visibility: visible. El texto puede venir de un atributo data-tooltip mediante content: attr(data-tooltip) en un pseudoelemento, o de un elemento hijo.
¿Cómo se hace la flecha del tooltip?
La flecha es un triángulo CSS: un pseudoelemento vacío con un borde transparente en todos los lados y un borde de color en uno de ellos. Un borde de 6px con border-top-color dibuja un triángulo que apunta hacia abajo de 12px de ancho y 6px de alto, colocado justo debajo de la burbuja.
¿Qué versión es más accesible?
La versión con elemento hijo. El tooltip es un elemento real con role="tooltip" conectado al disparador mediante aria-describedby, así que los lectores de pantalla lo anuncian de forma fiable. Algunos lectores de pantalla omiten el texto generado con content: attr(), así que usa la versión data-tooltip solo para pistas complementarias.
¿Por qué usar visibility además de opacity?
Con opacity: 0 solo, el tooltip sigue en su sitio, donde todavía se puede pasar el ratón por encima y bloquear clics. visibility: hidden lo saca de la interacción y aun así permite una transición suave, porque visibility cambia al final del fundido de salida.
¿Se puede cerrar un tooltip CSS con la tecla Escape?
No solo con CSS. El criterio WCAG 1.4.13 pide que el contenido que se muestra al pasar el ratón o con el foco se pueda cerrar sin mover el puntero ni el foco; si tu tooltip puede tapar contenido importante, añade un pequeño script que lo oculte con Escape, o mantenlo corto y colocado de forma que no tape nada.
¿Cómo evito que el tooltip se salga de la pantalla?
El CSS puro no puede detectar el borde de la ventana. Elige una posición con suficiente espacio (para elementos cerca de la parte superior, usa abajo), mantén pequeño el ancho máximo o usa una biblioteca de posicionamiento como Floating UI cuando el disparador pueda estar en cualquier lugar.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.