Playground de :popover-open en CSS

Explora :popover-open con un popover nativo. Activa o desactiva un bloque de posicionamiento que solo se aplica mientras el popover está visible.

HTML

<div class="popover-demo">
  <button popovertarget="popover-card">
    Open popover
  </button>

  <div id="popover-card" popover>
    Native popover
  </div>
</div>

CSS

.popover-demo [popover]:popover-open {
  inline-size: 200px;
  block-size: 100px;
  position: absolute;
  inset: unset;
  inset-block-end: 5px;
  inset-inline-end: 5px;
  margin: 0;
}