Componentes · Ayuda breve
Tooltip (descripción contextual)
Explica brevemente un control al recibir hover o foco, sin ocultar información imprescindible para completar la tarea.
Texto breve
Aclara una acción o icono en una frase.
Hover y foco
También aparece durante la navegación con teclado.
Relacionado
aria-describedby conecta el disparador con la ayuda.
Código + resultado
Ayuda accesible
El contenido del tooltip complementa el nombre del botón; no lo reemplaza.
<span class="q-tooltip-anchor">\n <button class="btn btn-light" type="button" aria-describedby="save-help">Guardar</button>\n <span class="q-tooltip" id="save-help" role="tooltip">Guarda los cambios del proyecto.</span>\n</span>Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
Referencia
Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.
| Clase o atributo | Función | Uso recomendado |
|---|---|---|
.q-tooltip-anchor | Contexto de posicionamiento. | Envuelve disparador y tooltip. |
.q-tooltip | Contenido emergente. | Texto breve no interactivo. |
role="tooltip" | Expone el patrón accesible. | Aplicar al mensaje. |
aria-describedby | Relaciona disparador y mensaje. | Debe apuntar al id del tooltip. |
Recomendaciones
Buenas prácticas de Tooltip
Complementario
No escondas instrucciones esenciales dentro del tooltip.
Breve
Usa una frase directa y evita contenido interactivo.
Foco visible
Comprueba que aparezca tanto con mouse como con teclado.