# Popover

> Panel pequeño junto a un botón con un formulario corto, opciones o un enlace: básico, con acción y alineación.

Categoría: Feedback · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- Para un formulario corto, opciones o un enlace junto al botón que lo abre.
- Si solo es texto, es un Tooltip; si es una lista de acciones, un Menú desplegable.
- Si bloquea la tarea o tiene muchos campos, es un Modal.

## Básico

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-start gap-2"><button type="button" aria-expanded="true" class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Abrir popover</button><div role="dialog" aria-labelledby="pop-1-t" class="w-80 rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none p-4"><div class="space-y-1"><h4 id="pop-1-t" class="text-sm font-semibold">Dimensiones</h4><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Define las medidas de la imagen.</p></div><div class="mt-4 space-y-2"><div class="grid grid-cols-3 items-center gap-4"><label for="p-ancho" class="text-sm font-medium">Ancho</label><input id="p-ancho" value="100%" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25 col-span-2 h-9 px-3" /></div><div class="grid grid-cols-3 items-center gap-4"><label for="p-max" class="text-sm font-medium">Ancho máx.</label><input id="p-max" value="300 px" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25 col-span-2 h-9 px-3" /></div><div class="grid grid-cols-3 items-center gap-4"><label for="p-alto" class="text-sm font-medium">Alto</label><input id="p-alto" value="25 px" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25 col-span-2 h-9 px-3" /></div><div class="grid grid-cols-3 items-center gap-4"><label for="p-altomax" class="text-sm font-medium">Alto máx.</label><input id="p-altomax" value="Ninguno" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25 col-span-2 h-9 px-3" /></div></div></div></div></div>
```

## Con acción

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-start gap-2"><button type="button" aria-expanded="true" class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:share-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Compartir</button><div role="dialog" aria-labelledby="pop-2-t" class="w-96 max-w-full rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none p-4"><h4 id="pop-2-t" class="text-sm font-semibold">Compartir este documento</h4><p class="mt-1 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Cualquier persona con el enlace podrá verlo.</p><div class="mt-4 flex gap-2"><label for="pop-link" class="sr-only">Enlace</label><input id="pop-link" readonly value="https://ejemplo.cl/d/8f2k1" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25 h-10 px-3" /><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm bg-ccs-blue text-white hover:bg-ccs-blue-mid shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:copy-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Copiar</button></div></div></div></div>
```

## Alineación

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-start gap-2 w-56"><button type="button" aria-expanded="true" class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Inicio</button><div role="dialog" aria-label="Ejemplo" class="w-48 rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none p-3 text-sm">Alineado al inicio del botón.</div></div><div class="flex flex-col items-center gap-2 w-56"><button type="button" aria-expanded="true" class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Centro</button><div role="dialog" aria-label="Ejemplo" class="w-48 rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none p-3 text-sm">Alineado al centro del botón.</div></div><div class="flex flex-col items-end gap-2 w-56"><button type="button" aria-expanded="true" class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Fin</button><div role="dialog" aria-label="Ejemplo" class="w-48 rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none p-3 text-sm">Alineado al fin del botón.</div></div></div>
```

## Guía: Comportamiento

Con popover nativo, el navegador lo cierra con Escape y con un clic afuera, y lo deja sobre todo lo demás. El panel lleva role="dialog" y un título con aria-labelledby. Al abrir, el foco pasa al primer campo; al cerrar, vuelve al botón.