ExtJS 按鈕提示灰色背景、位置飄移？CSS 覆蓋排查指南

現象

ExtJS 按鈕的 `tooltip` (QuickTip) 出現：

• 背景顏色為灰色而非預設白/黃。
• 位置忽上忽下，不固定在按鈕側邊。

根本原因

專案自定義 CSS 覆蓋了 ExtJS 原生樣式類。常見衝突類名：

• .x-tip, .x-tip-body, .x-tip-header
• .x-btn, .x-btn-inner
• 全局 * { box-sizing: border-box; } 或 body { font-size: ... } 影響佈局計算。

排查步驟 (F12 大法)

1. Chrome 開發者工具 → Elements 面板。
2. 滑鼠懸停按鈕觸發 tooltip，快速切換到 tooltip 元素 (通常在 `body` 末尾，class 含 `x-tip`)。
3. Styles 面板查看 Computed 標籤，找出 `background-color`、`position`、`top`/`left` 來源樣式表。
4. 點擊樣式表連結跳轉到 Sources，確認是專案 CSS 還是 `ext-all.css`。

快速修復方案

方案一：提高 ExtJS 樣式優先級 (推薦)

/* 在專案 CSS 最後引入，或使用 !important 覆蓋 */
.x-tip {
    background-color: #ffffe0 !important; /* 恢復預設淡黃 */
    border: 1px solid #cccccc !important;
}
.x-tip-body {
    color: #333 !important;
    padding: 4px 8px !important;
}

方案二：隔離自定義樣式作用域

/* 將專案樣式包裹在特定類下，避免污染 ExtJS 元件 */
.my-app .custom-btn { ... } /* 不要裸寫 .x-btn { ... } */

HTML 結構：

方案三：重置 ExtJS 主題變數 (Ext JS 6+ 現代工具包)

// sass/var/all.scss
$tooltip-background-color: #ffffe0;
$tooltip-border-color: #cccccc;
$tooltip-body-padding: 4px 8px;

重新編譯主題 (`sencha app build`) 生效。

位置飄移專項修復

通常由 position: relative/absolute 衝突或 z-index 錯亂導致。

/* 強制 tooltip 定位邏輯優先 */
.x-tip {
    position: absolute !important; /* ExtJS 內部用 absolute 定位 */
    z-index: 10000 !important;     // 確保浮層最高
}

預防建議

• 引入順序：ext-all.css → theme-xxx.css → custom.css。
• 避免全局元素選擇器 (`*`, `div`, `span`, `body`) 設定佈局屬性。
• 使用 Ext.tip.QuickTipManager.init() 統一配置 tooltip 行為。