ネイティブポップオーバー（popover）

<!-- ✅ デモ1: 基本ポップオーバー（JSなし） -->
<button popovertarget="my-popover">メニューを開く</button>

<div id="my-popover" popover>
  <p>ポップオーバーの内容です。</p>
  <button popovertarget="my-popover" popovertargetaction="hide">閉じる</button>
</div>

<!-- ✅ デモ2: popover="hint"（Chrome 129以降） -->
<button id="hint-trigger">ホバーで表示</button>
<div id="hint-popover" popover="hint">
  ツールチップのテキスト
</div>

<!-- ✅ デモ3: popover="manual"（JS制御） -->
<div id="toast" popover="manual">
  ✅ 保存しました
</div>

// ✅ デモ2: popover="hint" をホバーで制御
const trigger = document.querySelector('#hint-trigger');
const hint = document.querySelector('#hint-popover');

trigger.addEventListener('mouseenter', () => hint.showPopover());
trigger.addEventListener('mouseleave', () => hint.hidePopover());
trigger.addEventListener('focus', () => hint.showPopover());
trigger.addEventListener('blur', () => hint.hidePopover());

// ✅ デモ3: popover="manual" を JS で手動制御
const toast = document.querySelector('#toast');

function showToast() {
  toast.showPopover();
  setTimeout(() => toast.hidePopover(), 3000); // 3秒後に自動で閉じる
}

// ✅ popover のイベント
toast.addEventListener('toggle', (e) => {
  console.log('新しい状態:', e.newState); // "open" または "closed"
});

// ✅ CSS: ポップオーバーのスタイリング
/*
  [popover] {
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  [popover]::backdrop {
    background: transparent; // auto の場合はバックドロップが出る
  }
*/