「HTML Popover API 実践ガイド」JSなしでツールチップ・メニュー・モーダルを作る

<!-- ボタン側：開きたい要素のidを popovertarget に書く -->
<button popovertarget="my-popover">開く</button>

<!-- ポップオーバー側：popover属性を付けるだけ -->
<div id="my-popover" popover>
  ここに表示する中身
</div>

<button popovertarget="user-menu">メニュー ▾</button>

<div id="user-menu" popover class="menu">
  <a href="/profile">プロフィール</a>
  <a href="/settings">設定</a>
  <hr>
  <a href="/logout">ログアウト</a>
</div>

/* ボタン側：アンカー名をつける */
.menu-btn {
  anchor-name: --menu-anchor;
}

/* ポップオーバー側：アンカーを基準に配置 */
.menu {
  position-anchor: --menu-anchor;
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 8px;
}

<button popovertarget="confirm">削除する</button>

<div id="confirm" popover class="modal">
  <h3>本当に削除しますか？</h3>
  <p>この操作は元に戻せません。</p>
  <button popovertarget="confirm" popovertargetaction="hide">
    キャンセル
  </button>
  <button popovertarget="confirm" popovertargetaction="hide">
    削除する
  </button>
</div>

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* popover専用の擬似要素で背景を暗くできる */
.modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.popover {
  opacity: 0;
  transition: opacity 0.2s;
}
.popover:popover-open {
  opacity: 1;
}
/* displayが none ⇔ block で切り替わるため、 */
/* 開いた瞬間にはすでに opacity:1 になっていてアニメしない */

.popover {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s, transform 0.2s,
              display 0.2s allow-discrete,
              overlay 0.2s allow-discrete;
}
.popover:popover-open {
  opacity: 1;
  transform: scale(1);
}
/* 表示開始時の初期値を定義 */
@starting-style {
  .popover:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

const popover = document.getElementById('my-popover');

// 開く */
popover.showPopover();

// 閉じる */
popover.hidePopover();

// トグル */
popover.togglePopover();

// 開閉時のイベント */
popover.addEventListener('toggle', (e) => {
  if (e.newState === 'open') {
    // 開いた直後の処理 */
  }
});

if (!HTMLElement.prototype.hasOwnProperty('popover')) {
  // 非対応：oddbird/popover-polyfill などを読み込むか、 */
  // 古い実装にフォールバックする */
  document.querySelectorAll('[popover]').forEach(el => {
    el.hidden = true;
  });
}