DESY

Sistema de Diseño del Gobierno de Aragón.

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

Pregunta

Globo de pregunta

Información

Globo de información

Alerta

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é tener en cuenta
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.