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.

Variantes #

Pregunta

Información

Alerta

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

Para aportar información relevante para el usuario.

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

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.

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.

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.