# Popover (acciones complementarias)

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

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

Componentes · Contenido contextual

Presenta información o acciones contextuales mediante la API nativa de popover, con apertura, cierre y capa superior administrados por el navegador.

v2.0

▣
## Contenido rico
Admite texto, enlaces y controles breves.

✓
## API nativa
Popover y popovertarget gestionan el estado.

Esc
## Cierre esperado
Permite cerrar con Escape o al interactuar fuera.

Código + resultado

## Panel de acciones
El botón declara el elemento que controla mediante popovertarget.

HTML

```html
<button class="btn btn-primary" type="button" popovertarget="project-actions">Abrir acciones</button>\n<div class="q-popover rounded-12" id="project-actions" popover>\n  <strong>Acciones disponibles</strong>\n  <p>Duplica, archiva o comparte el proyecto.</p>\n</div>
```

Resultado aplicado  Popover
Componente real
Acciones disponibles  Duplica, archiva o comparte el 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-popover | Superficie emergente. | Aplicar al elemento con popover. |
| popover | Activa la API nativa. | Atributo del panel. |
| popovertarget | Relaciona el botón con el panel. | Su valor coincide con el id. |
| .rounded-* | Radio opcional. | Se compone como utilidad externa. |

Recomendaciones

## Buenas prácticas de Popover

01
### Acción contextual
No lo uses para procesos largos o críticos.

02
### Disparador claro
El botón debe explicar qué contenido abrirá.

03
### Contenido breve
Mantén el panel compacto y fácil de cerrar.