/* ============================================================ tooltip.css · 全域漂浮 tooltip 共用樣式 ------------------------------------------------------------ 配對 tooltip.js 使用。引入這兩個檔案後，頁面內任何的 tooltip 都會在 hover 時以「全域 fixed 浮層」呈現，完全脫離父容器的 overflow:hidden / stacking context 限制 — 不會再被任何卡片、表格、後續區塊擋住。 ============================================================ */ /* 觸發字（外觀由各頁面自訂底線色與文字色） */ .term-tooltip { position: relative; cursor: help; font-weight: 600; } /* 原 inline tooltip 內容當作「資料來源」 — 不顯示，但保留在 DOM 給 JS 讀取 */ .term-tooltip-text { display: none !important; } /* 全域漂浮 tooltip — 由 JS 動態插入到並定位 */ .tt-global { position: fixed; visibility: hidden; opacity: 0; pointer-events: none; z-index: 100000; background: #1e293b; color: #f1f5f9; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 400; line-height: 1.6; max-width: 320px; width: max-content; text-align: left; box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition: opacity 0.15s ease; /* 不影響定位計算 */ margin: 0; } .tt-global.tt-visible { visibility: visible; opacity: 1; } /* 箭頭 — 預設指下（tooltip 在觸發字上方時） */ .tt-global::after { content: ''; position: absolute; border-width: 6px; border-style: solid; left: var(--tt-arrow-x, 50%); transform: translateX(-50%); } .tt-global.tt-above::after { top: 100%; border-color: #1e293b transparent transparent transparent; } .tt-global.tt-below::after { bottom: 100%; border-color: transparent transparent #1e293b transparent; }