Í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.