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

button.addEventListener('mouseenter', () => {
  // ポップオーバーが既に表示されている場合は何もしない
  if (popover.matches(':popover-open')) return;
  popover.showPopover();
});

button.addEventListener('mouseleave', () => {
  // ポップオーバーが既に表示されていない場合は何もしない
  if (!popover.matches(':popover-open')) return;
  popover.hidePopover();
});