Generador de tooltip CSS
Elige la posición y el estilo y pasa el mouse (o la tecla Tab) por los botones de la vista previa. El código no usa JavaScript.
Cómo usarSugerencia que aparece al pasar el mouse
Disponible en: 
Generador de tooltip CSS: para qué sirve
El tooltip es la sugerencia corta que aparece al pasar el mouse por un botón o ícono. Este generador crea la sugerencia solo con CSS, en las cuatro posiciones, con flechita opcional, colores, esquinas y un retraso para que no parpadee cuando el mouse solo pasa por encima.
El código es accesible: la sugerencia está vinculada al botón con aria-describedby, tiene role=tooltip, aparece también cuando el elemento recibe el foco por teclado o toque y respeta a quien prefiere menos movimiento. La vista previa tiene tres botones para probar.
Cómo usar
- Elige la posición, los colores y las esquinas.
- Ajusta el retraso y la flechita.
- Copia el HTML y el CSS.
Cuándo usar
- Explicar íconos sin texto.
- Sugerencias en formularios.
- Botones de acción en paneles.
Preguntas frecuentes
¿El tooltip funciona en el celular?
En el celular no existe el pasar el mouse; la sugerencia aparece cuando el elemento recibe el foco, al tocar un botón o un enlace. Por eso no pongas en el tooltip información que la persona necesite obligatoriamente: debe estar también en el texto de la página.
¿Cómo queda accesible?
El texto de la sugerencia va en un elemento con role=tooltip vinculado al botón mediante aria-describedby, para que el lector de pantalla lo lea junto con el nombre del botón. También aparece en el foco del teclado (focus-visible) y no depende solo del color.
¿Por qué hay un retraso para que aparezca?
Un pequeño retraso evita que las sugerencias parpadeen cuando el mouse solo pasa por encima camino a otro lugar. Para desaparecer, el efecto es inmediato.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.