05 · Popover API — HTML Demos

Demo en vivo

popover=auto — se cierra al clicar fuera

popover=auto
Se cierra si haces clic fuera o si abres otro popover. Solo puede haber uno auto abierto a la vez.

popover=manual — no se cierra solo

popover=manual
No se cierra al clicar fuera. Ideal para paneles de control o notificaciones persistentes.

popovertargetaction: show · hide · toggle

Acciones explícitas
Controlado con show, hide y toggle por separado.

Dos popovers=auto — se excluyen mutuamente

Popover A
Abrir B cerrará este.

Popover B
Abrir A cerrará este.

Top Layer — los popovers se renderizan por encima de cualquier z-index, incluso de position:fixed. No necesitas gestionar capas.

Sin JS — el botón con popovertarget apunta al id del popover. Cero JavaScript necesario.

Código importante

<!-- Auto: se cierra al clicar fuera -->
<button popovertarget="mi-pop">
  Abrir
</button>

<div id="mi-pop" popover>
  Contenido del popover
</div>

<!-- Manual: no se cierra solo -->
<div id="mi-pop" popover="manual">
  Panel persistente
  <button
    popovertarget="mi-pop"
    popovertargetaction="hide">
    Cerrar
  </button>
</div>

<!-- Tres acciones posibles -->
<button popovertarget="p"
        popovertargetaction="show">Show</button>
<button popovertarget="p"
        popovertargetaction="hide">Hide</button>
<button popovertarget="p"
        popovertargetaction="toggle">Toggle</button>

<!-- CSS cuando está visible -->
[popover]:popover-open {
  animation: fadeIn .2s ease;
}

<!-- JS si necesitas más control -->
const pop = document.getElementById('p')
pop.showPopover()
pop.hidePopover()
pop.togglePopover()

pop.addEventListener('toggle', e => {
  console.log(e.newState) // "open" o "closed"
})