Respuesta corta: un tooltip es un mensaje corto que aparece cuando alguien pasa el ratón por encima de un elemento o le da el foco, como un botón de icono. Úsalo solo para ayuda extra, nunca para información que la gente necesita. Haz que se abra también con el foco del teclado, que siga abierto si el puntero pasa encima y que se cierre con Escape.
Qué es un tooltip
NN/g define el tooltip como un mensaje breve e informativo que aparece cuando alguien interactúa con un elemento. Se abre con el ratón o con el teclado, y explica el elemento al que acompaña.
MDN añade que aparece solo tras una pequeña espera, normalmente de uno a cinco segundos, y se cierra cuando el puntero o el foco se van. Nadie lo pide, así que nunca debería esconder lo que la gente necesita.
Los tooltips y sus vecinos
| Patrón | Se abre con | Sirve para |
|---|---|---|
| Tooltip | Pasar el ratón o el foco del teclado | Una pista corta para un icono o un control |
| Ayuda emergente | Un toque o un clic | Ayuda extra que también funciona en pantallas táctiles |
| Atributo title | Solo dejar el ratón un rato encima | Nada importante: con teclado o pantalla táctil no se ve |
| Diálogo no modal | Un clic | Contenido extra con enlaces o botones |
| Texto visible | Siempre está | Todo lo que la gente necesita para terminar una tarea |
De NN/g, MDN y las prácticas de autoría de ARIA del W3C, en inglés, consultados el 5 de noviembre de 2026.
NN/g señala que los tooltips no suelen estar disponibles en pantallas táctiles, porque dependen de pasar el ratón. Las ayudas emergentes, que se abren con un toque o un clic, hacen ese trabajo ahí.
Por qué el atributo title no basta
Los navegadores muestran el atributo title de un elemento como un pequeño tooltip tras dejar el ratón un rato encima. MDN advierte que nadie puede abrirlo con el teclado ni con un toque, y eso lo hace inaccesible.
MDN enumera a quién le falla: a quien solo usa pantallas táctiles, a quien navega con teclado y a quien usa lector de pantalla o ampliador. También a quien tiene problemas de motricidad fina o dificultades cognitivas.
El W3C deja el tooltip propio del navegador fuera de sus reglas para el contenido al pasar el ratón, porque lo controla el navegador. Aun así, no es buen sitio para nada importante. Nuestra guía de aria-describedby explica una forma mejor de añadir una descripción.
Qué pide WCAG 1.4.13
El criterio de conformidad 1.4.13, de nivel AA, cubre tooltips propios, submenús y otras ventanas emergentes que aparecen al pasar el ratón o con el foco.
Que se pueda cerrar: la persona puede cerrar el contenido sin mover el puntero ni el foco, por ejemplo con Escape. Que se pueda pasar por encima: el puntero puede moverse sobre el contenido sin que desaparezca.
Que se mantenga: el contenido sigue a la vista hasta que el puntero o el foco se van, la persona lo cierra o su información deja de ser válida.
Quien usa un ampliador de pantalla ve solo una parte pequeña de la página, la que sigue al puntero, explica el W3C. Un puntero grande puede tapar justo el contenido que abrió.
La primera condición tiene dos excepciones: los mensajes de error y el contenido que solo tapa espacio vacío o decoración.
Cómo hacer un tooltip accesible
El patrón del W3C pone role="tooltip" en el elemento que contiene el texto, y aria-describedby, con el id del tooltip, en el elemento que lo abre. El foco se queda en ese elemento mientras se ve el tooltip, y Escape lo cierra.
Un tooltip nunca recibe el foco, así que MDN avisa de que no puede contener enlaces ni botones. Para contenido extra que haya que pulsar, el W3C propone un diálogo no modal, que explica nuestra guía del elemento dialog.
Para una ayuda que se abre con un clic, el atributo popover ayuda. Un botón con popovertarget lo abre sin script, y MDN explica que un popover auto se cierra cuando alguien hace clic fuera o pulsa Esc.
NN/g añade que un tooltip tiene que funcionar con el teclado además de con el ratón. Nuestra guía de navegación con teclado muestra cómo probar una página solo con Tab.
Cómo añadir un tooltip
- Pregúntate primero si el texto podría quedar a la vista.
- Hazlo corto y útil, y quita los tooltips que repiten la etiqueta.
- Pon role="tooltip" en el texto y aria-describedby en el elemento que lo abre.
- Muéstralo con el foco del teclado, no solo al pasar el ratón.
- Mantenlo abierto mientras el puntero pasa encima de él.
- Ciérralo con Escape, sin mover el puntero ni el foco.
- No metas nunca enlaces, botones ni pasos obligatorios dentro.
Nuestras páginas y los tooltips
El 5 de noviembre de 2026 revisamos ocho de nuestras páginas: la de inicio, la de diseño web, la de precios y una guía, en los dos idiomas. Ninguna usa tooltips. No hay rol tooltip, ni popover, ni atributo title en nada que vea el visitante.
Así es como trabajamos: lo que la gente necesita queda en texto visible. En la página de precios, cada uno de los seis servicios muestra sus condiciones, como la configuración o la permanencia, en texto debajo del precio.
Hay una sola cosa en nuestras páginas que se abre al pasar el ratón: el panel de Servicios de la cabecera. Lo probamos en la página de inicio y en una guía, en los dos idiomas, con las tres condiciones del W3C.
El panel siguió abierto cuando el puntero pasó encima de él y tras tres segundos sin moverse. Escape lo cerró con el puntero todavía sobre el panel, y se cerró cuando el puntero se fue.
Antes de publicar
- Nada de lo que la gente necesita para terminar una tarea está en un tooltip.
- Ningún tooltip repite la etiqueta a la que acompaña.
- Cada tooltip se abre también con el foco del teclado.
- Escape lo cierra sin mover el puntero.
- El puntero puede pasar encima sin que se cierre.
- Ningún texto importante está solo en un atributo title.
RecuerdaSi la información es lo bastante importante para un tooltip, es lo bastante importante para estar a la vista. Deja los tooltips para la ayuda extra.
Nuestro servicio de diseño web deja la información importante en texto visible, como las páginas de arriba.
Respuestas rápidas sobre los tooltips
¿Qué es un tooltip?
Un mensaje corto que aparece cuando alguien pasa el ratón por encima de un elemento o le da el foco, como un botón de icono. NN/g lo define como un mensaje breve e informativo, y MDN añade que sale tras una pequeña espera y se cierra cuando el puntero o el foco se van.
¿Puedo usar el atributo title como tooltip?
No para nada importante. MDN explica que el navegador muestra el title solo al dejar el ratón un rato encima, así que quien usa el teclado o una pantalla táctil nunca lo ve. Pon esa información como texto visible o haz un tooltip de verdad.
¿Funcionan los tooltips en el teléfono?
Normalmente no. NN/g señala que los tooltips dependen de pasar el ratón y no suelen estar disponibles en pantallas táctiles. En un teléfono, una ayuda que se abre con un toque y se cierra con otro toque o con Escape cumple la misma función.
¿Puede un tooltip llevar un enlace o un botón?
No. MDN dice que un tooltip nunca recibe el foco, así que no puede contener enlaces, campos ni botones. Si el contenido extra necesita algo que pulsar, el W3C propone un diálogo no modal.
¿Qué pide WCAG para los tooltips?
El criterio 1.4.13, de nivel AA, cubre el contenido que aparece al pasar el ratón o con el foco. Tiene que poder cerrarse sin mover el puntero ni el foco, dejar pasar el puntero por encima y seguir a la vista hasta que la persona decida irse.
Fuentes
Consultadas el 5 de noviembre de 2026. En inglés: Iniciativa de Accesibilidad Web del W3C, Understanding Success Criterion 1.4.13: Content on Hover or Focus y Tooltip Pattern; MDN Web Docs, ARIA: tooltip role, title y popover; Nielsen Norman Group, Tooltip Guidelines. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.