CodePen Embed - ZEmGyer

<button popovertarget="popover">ポップアップを表示</button>
<div popover id="popover">ポップアップの中身</div>

const popover = document.querySelector('#popover');

popover.addEventListener('toggle', (event) => {
  setTimeout(() => {
    if (event.target.matches(':popover-open')) {
      event.target.hidePopover();
    }
  }, 3000);
});

This Pen is owned by azukiazusa1 on CodePen.

See more by @azukiazusa1 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.