Popover 是在按鈕旁開啟的小面板,用來放置可互動的內容:篩選條件、簡短的表單、顏色選擇器。它是原生的 popover="auto",因此瀏覽器會在按 Esc 鍵或點擊外部時關閉它、歸還焦點,並在 Tab 鍵順序中把它放在觸發元素之後。

懸停卡片是內容豐富的工具提示。滑鼠短暫懸停後就會開啟,透過鍵盤取得焦點時則立即開啟,用來描述它的觸發元素。指標移到卡片上時會保持開啟,因此可以閱讀和選取其中的文字。

兩者在空間不足時都會翻轉到另一側,始終留在畫面內,並在頁面捲動時跟隨觸發元素。

篩選

內含表單的 Popover。arrow 讓它指向觸發元素,hide() 可從程式碼關閉它。

Showing open, in review issues.

懸停卡片

將滑鼠懸停在名字上,或用 Tab 鍵移到它上面。卡片會描述該連結,因此螢幕閱讀器會在唸出名字後唸出卡片。

Reviewed by @ada and @grace.

方位與進場動畫

side 和 align 決定它在哪裡開啟;start 和 end 會依循書寫方向。enter 和 motion 決定它如何進場。