Tooltip

El Tooltip es una etiqueta breve que aparece al pasar el mouse o enfocar un control, para nombrarlo o aclararlo con pocas palabras. Desaparece al salir del control y no contiene acciones.

Propiedades y configuraciones

Cuando usarlo

Úsalo para nombrar controles de solo ícono o para agregar una aclaración breve y prescindible, que la persona puede no leer sin que eso le impida completar su trámite.

Si la información es necesaria para completar un campo, muéstrala siempre visible como texto de ayuda del Field; si es un aviso importante, usa Alert; si la explicación es larga o tiene enlaces, llévala a la página o a un Accordion de ayuda.

Buenas prácticas

Recomendado: Úsalo para nombrar botones de solo ícono

Los íconos solos pueden ser ambiguos. El tooltip muestra su nombre al pasar el mouse o enfocar, sin ocupar espacio fijo.

Recomendado: Escribe una frase breve que complemente

Pocas palabras que aclaran un término o una sigla, sin repetir lo que ya dice la interfaz.

Recomendado: Elige un lado que no tape lo que la persona necesita leer

Sobre el ícono, el tooltip no tapa el campo que se está llenando. Si lo cubriera, la persona no vería lo que escribe.

Malas prácticas

No recomendado: No escondas información necesaria en el tooltip

Formatos, requisitos y plazos deben estar visibles. En pantallas táctiles el tooltip es difícil de descubrir.

No recomendado: No escribas párrafos en el tooltip

Un tooltip largo se corta en muchas líneas, tapa la interfaz y desaparece antes de terminar de leerlo.

No recomendado: No pongas enlaces ni botones dentro del tooltip

El tooltip se cierra al salir del trigger y no recibe foco: el enlace queda inalcanzable con teclado.

No recomendado: No repitas el texto que el control ya muestra

Si el botón ya dice “Descargar certificado”, un tooltip idéntico no agrega nada y duplica el anuncio.

Recomendaciones de accesibilidad

Usa un trigger enfocable con nombre propio
El trigger debe ser un <button> o enlace que reciba foco con el teclado. En los botones de solo ícono, el aria-label debe decir lo mismo que el tooltip (p. ej. “Eliminar borrador”) para que el nombre no dependa del tooltip.

Mantén el ícono del trigger como decorativo
El ícono va con aria-hidden="true"; el nombre accesible está en el botón, no en el ícono.

No pongas contenido interactivo dentro
El tooltip no recibe foco ni se mantiene abierto al moverse dentro de él de forma confiable: nada de enlaces, botones ni campos en el tooltip.

Recuerda que en móvil no hay hover
La información del tooltip debe ser prescindible o estar disponible de otra forma (texto de ayuda visible, página de ayuda), porque en pantallas táctiles muchas personas no llegan a abrirlo.

Escribe textos breves y en lenguaje claro
El lector de pantalla anuncia el tooltip como descripción del control: un texto corto se entiende a la primera; uno largo interrumpe la navegación.

Evita que tape el foco o el contenido que se está usando
Elige una posición preferida que no cubra el campo activo ni el texto que la persona está leyendo, sobre todo con zoom alto.