Índice de páginas
Globo de ayuda
El globo de ayuda o tooltip ofrece información de un elemento al pasar el ratón sobre él o bien cuando el elemento está en focus.
Índice de apartados de esta página
Variantes #
Globo de pregunta
Globo de información
Globo de alerta
Pregunta #
Para resolver dudas frecuentes o describir el significado de un elemento o concepto concreto.
Información #
Para aportar información relevante para el usuario.
Alerta #
Para resaltar y aportar información crítica sobre un elemento importante, con errores o con un período temporal limitado.
Accesibilidad #
Cómo funciona #
Etiqueta de texto junto con un icon, el cual posee los atributos role=img y aria-label. Debe tener un aria-describedby que llamne al id del contenedor emergente.
El contenedor emergente posee un role=tooltip.
El contenedor debe aparecer al hacer hover o tomar el foco. Si la persona mueve el cursor hacia el contenido éste no debe desaparecer. Se puede ocultar pulsando la tecla escape.
Basado en el patrón tooltip de W3C
| Qué usar | Dónde | Función |
|---|---|---|
id |
Parámetro Nunjucks dentro del componente | Configura id únicos para el componente, la etiqueta accionable y el contenedor emergente. |
role=img y aria-label |
En el SVG de un icono personalizado | Descibe el propósito del contenedor emergente. |
Buenas prácticas #
- La información que aparece en los tooltips no debe ser vital para completar la tarea.
- Debe redactarse de manera concreta y con un lenguaje sencillo.