# Globo de ayuda. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

# Globo de ayuda

Mostrar y ocultar

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](#variantes)
-   [Accesibilidad](#accesibilidad)
-   [Buenas prácticas](#buenas-prcticas)

## Variantes [#](#variantes)

Pregunta

Globo de pregunta

Información

Globo de información

Alerta

Globo de alerta

### Pregunta [#](#pregunta)

Para resolver dudas frecuentes o describir el significado de un elemento o concepto concreto.

### Información [#](#informacin)

Para aportar información relevante para el usuario.

### Alerta [#](#alerta)

Para resaltar y aportar información crítica sobre un elemento importante, con errores o con un período temporal limitado.

## Accesibilidad [#](#accesibilidad)

### Cómo funciona [#](#cmo-funciona)

-   Etiqueta de texto junto con un icono. 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](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ "Se abre en ventana nueva")

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 [#](#buenas-prcticas)

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