Popover 彈出框

點擊或滑過元素後彈出的浮層,可放比 Tooltip 更豐富的資訊或小型操作。使用 Element Plus 的 el-popover。

設計準則

• 用於「補充資訊或小型操作面板」:欄位說明、客戶摘要卡、一小組動作;只放一句純文字說明用 Tooltip,需要確認用 Popconfirm
• 觸發方式看用途:看資訊用 hover,含可點操作用 click(避免滑走就消失)
• 內容用預設插槽:可放頭像、分隔線、按鈕等;內容越豐富越該用 click
• 寬度適中(200–280),內容過多就改用 Drawer 或 Dialog
• 位置(placement)選能完整顯示、不被邊界裁切的方向

基本用法(hover / click)

loading

豐富內容(插槽)

loading

嵌套操作

用 :visible 控制顯示,把「確定刪除?」這類二次確認直接嵌在 popover 裡,比另開 Dialog 更輕量。

loading

Do / Don't

✅ Do	❌ Don't
補充資訊或小操作面板	塞整個表單進 popover
含操作用 click 觸發	有按鈕卻用 hover(滑走就關)
純文字說明改用 Tooltip	一句話也開一個 popover

給工程師

• 常用 props:trigger(hover / click / focus / contextmenu)、placement、title、content、width、popper-class、show-arrow
• 觸發元素放 #reference 插槽;豐富內容放預設插槽
• 完整 API 見 Element Plus Popover 文件。本站規範優先於 EP 文件中的視覺建議。