Popover API

看到「Popover API (developer.mozilla.org)」這個討論，引用的資料是 MDN 上面的「Popover API」，從名字也可以看出來與 pop over 有關 (話說查單字發現 popover 這個詞在字典裡居然是泡芙，英文維基百科上的 Popover 也可以看到...)。

Anyway，馬上有想到的是 modal 類的操作，在 MDN 上面的文件裡面有範例，可以用純 HTML 的方式操作：

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

效果就是在畫面正中央出現，預設有 border。

另外也可以透過 JavaScript 的方式操作：

HTMLElement.togglePopover()

MDN 文件把這個功能標成 Baseline 2024：

Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

因為是很新的東西 (就支援度來說)，要注意如果使用者是舊版瀏覽器的 fallback 行為。

翻文件底部的支援情況，可以看到最後支援的主流瀏覽器是 Firefox 125 (2024/04/16)，而 Firefox 還是有人會用 ESR 版本，目前還是 115，但照著 Firefox ESR 的節奏，應該是暑假會出下一版，但如果是現在要用的話，應該得考慮用 polyfill 去支援不原生支援的瀏覽器。