Tooltip 文字提示

滑過元素時顯示的簡短說明。使用 Element Plus 的 el-tooltip。

設計準則

• 只放「簡短說明」:圖示按鈕的名稱、被截斷文字的全文、欄位的一句提示;需要更多內容或可點操作用 Popover
• 圖示按鈕務必配 Tooltip:只有圖示沒有文字時,靠 tooltip 讓使用者知道功能
• 主題以深色(dark)為主,和全站一致;light 只在深底面板上為了對比才用
• 內容一行最好;真的需要換行用 #content 插槽,但別塞成一大段
• 位置(placement)選不會被邊界裁切、離觸發點近的方向

圖示按鈕說明

loading

位置

loading

主題與多行

loading

Do / Don't

✅ Do	❌ Don't
圖示按鈕都配 tooltip	純圖示按鈕沒有任何說明
一句簡短說明	塞一整段內容(該用 Popover)
主題統一用 dark	這顆 dark 那顆 light 亂搭

給工程師

• 常用 props:content、placement、effect(dark / light)、trigger、disabled、show-after、raw-content
• 內容可用 #content 插槽自訂(含換行、樣式)
• 完整 API 見 Element Plus Tooltip 文件。本站規範優先於 EP 文件中的視覺建議。