HTML Popover API

Popover API 是 2024 年網頁開發中最令人興奮的新特性之一。它允許開發者透過純 HTML 屬性來建立彈出式內容（如選單、提示框、側邊欄），而完全不需要撰寫任何 JavaScript。

過去我們實作 Popover 需要處理 z-index、焦點管理、點擊外部關閉等複雜邏輯，現在瀏覽器已經原生幫我們處理好了。

基本用法：popover 與 popovertarget

Popover API 主要依賴兩個核心屬性：

popover: 定義一個元素為彈出內容。
popovertarget: 設定觸發該彈出內容的按鈕（透過 ID 連結）。

程式碼範例

<!-- 觸發按鈕 -->
<button popovertarget="my-popover">開啟 Popover</button>

<!-- 彈出內容 -->
<div id="my-popover" popover>
  <p>這是一個純 HTML 實作的 Popover！</p>
  <p>點擊背景或按 Esc 鍵即可關閉。</p>
</div>

效果如下：

自動置頂 (Top Layer)：與 <dialog> 類似，設定了 popover 的元素會自動顯示在網頁的最上層，不會被父元素的 overflow: hidden 或 z-index 限制。
輕量關閉 (Light Dismiss)：預設情況下，點擊 Popover 以外的地方或是按下鍵盤的 Esc 鍵，Popover 都會自動關閉。
不必寫 JavaScript：開啟、關閉與狀態管理完全由瀏覽器負責。

手動切換類型 (popover="manual")

預設的 Popover 值是 auto。如果你希望 Popover 只有在特定操作下才關閉（例如點擊關閉按鈕，而不是點擊背景），可以將值設定為 manual。

<button popovertarget="manual-popover">開啟手動 Popover</button>

<div id="manual-popover" popover="manual">
  <p>你需要點擊下面的按鈕才能關閉我。</p>
  <button popovertarget="manual-popover" popovertargetaction="hide">關閉</button>
</div>

效果如下：

popovertargetaction 屬性可以設定為 show (顯示)、hide (隱藏) 或 toggle (切換，預設值)。

Popover 與 `<dialog>` 的區別

雖然兩者都能建立彈窗，但它們的語意與使用情境不同：

特性	`<dialog>`	Popover API
主要用途	必須處理的互動（如確認框、重要通知）	非重大的補充資訊（如選單、工具提示）
互動限制	`showModal()` 會阻斷背景內容操作	通常不會阻斷背景操作
JS 依賴度	需要 JS 調用 `.showModal()`	完全可以使用純 HTML 實作
標籤限制	必須使用 `<dialog>` 標籤	可以套用在任何元素上（如 `<div>`, `<section>`）

CSS 樣式與動畫

我們可以使用 ::backdrop 偽元素來設定背景（僅限於 Popover 顯示時）。此外，由於 Popover 是切換 display 屬性，過去要做進出場動畫很困難，但配合現代 CSS 的 @starting-style 屬性，現在變得非常容易。

/* 設定 Popover 初始樣式 */
[popover] {
  border: 1px solid #ccc;
  padding: 1rem;
  transition:
    opacity 0.3s,
    transform 0.3s;
  opacity: 0;
  transform: translateY(-20px);
}

/* 當 Popover 開啟時的狀態 */
[popover]:popover-open {
  opacity: 1;
  transform: translateY(0);
}

/* 進場動畫設定 */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translateY(-20px);
  }
}

瀏覽器支援度

Popover API 目前已被 Chrome 114+、Edge 114+、Safari 17+ 以及 Firefox 125+ 全面支援。這是 2024 年以來大幅取代自訂選單元件的最佳選擇。