Uso en HTML: <button class="tooltip" data-tooltip="Tu texto">Pásame el ratón</button>
Este generador de tooltips CSS crea bocadillos informativos en CSS puro, sin JavaScript. Elige el texto, la posición y los colores, mira la vista previa y copia el código. El tooltip aparece al pasar el ratón usando un atributo data-tooltip. Funciona en tu navegador, sin registro y en español.
Cómo crear un tooltip con CSS
- Escribe el texto y elige la posición y los colores.
- Copia el CSS generado a tu hoja de estilos.
- Añade la clase
tooltipy el atributodata-tooltipa tu elemento.
Tooltips sin JavaScript
La técnica usa el pseudo-elemento ::before para mostrar el contenido del atributo data-tooltip, y ::after para dibujar la flecha con el truco del borde. Todo se controla con :hover, sin una sola línea de JavaScript. Para dibujar solo la flecha por separado, usa nuestro generador de triángulos CSS.
Preguntas frecuentes
¿Necesito JavaScript?
No. Este tooltip funciona solo con CSS y el atributo data-tooltip.
¿Cómo cambio el texto en cada elemento?
El texto sale del atributo data-tooltip, así que cada elemento puede tener el suyo sin tocar el CSS.
¿Es accesible?
Para accesibilidad real conviene añadir también aria-label o title, ya que los lectores de pantalla no leen el contenido generado por CSS.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
