# Tooltip (descripción contextual)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-tooltip.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Ayuda breve

Explica brevemente un control al recibir hover o foco, sin ocultar información imprescindible para completar la tarea.

v2.0

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

HTML

```html
<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>
```

Resultado aplicado  Tooltip
Componente real
Guarda los cambios del proyecto.

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

01
### Complementario
No escondas instrucciones esenciales dentro del tooltip.

02
### Breve
Usa una frase directa y evita contenido interactivo.

03
### Foco visible
Comprueba que aparezca tanto con mouse como con teclado.