CSS Anchor Positioning 實作 tooltip：定位、fallback 與舊瀏覽器邊界

2026-08-02

前端

CSS

/

前端開發

/

使用者體驗

/

最佳實踐

tooltip 靠 JavaScript 量測 getBoundingClientRect() 並不總是錯，但它把「跟著按鈕定位」這件事變成一段需要自己維護的座標邏輯。CSS Anchor Positioning 把 anchor 與浮層的關係交給 CSS，還能在預設位置溢出視窗時選擇替代位置。

先記住限制：**這個功能雖已進入 Baseline 2026，舊裝置與較舊瀏覽器仍可能不支援。**把它當作增強功能，基本操作不能只依賴 anchor 定位。

先替觸發元件命名，再把浮層關聯到這個名稱；浮層必須是 absolute 或 fixed 定位，最後用 position-area 指定位置。

1
<button class="help-button">說明</button>
2
<div class="tooltip" role="tooltip">儲存後才會套用設定。</div>

1
.help-button {
2
  anchor-name: --help;
3
}
4

5
.tooltip {
6
  position: absolute;
7
  position-anchor: --help;
8
  position-area: block-end span-inline-end;
9
  margin-block-start: 0.5rem;
10
}

這裡的關聯不等於互動行為：仍要用按鈕事件、popover 或可及性邏輯決定 tooltip 何時顯示。若 anchor 被 display: none 或 visibility: hidden，其定位的元素也不應被當成仍可互動的提示。

不要只寫預設方向#

靠近視窗底部的按鈕，固定把 tooltip 放在下方會被裁掉。用 position-try-fallbacks 列出候選位置，讓瀏覽器在預設位置溢出時改試其他方向：

1
.tooltip {
2
  position: absolute;
3
  position-anchor: --help;
4
  position-area: block-end span-inline-end;
5
  position-try-fallbacks: block-start, inline-end, inline-start;
6
}

候選位置仍要在實際窄螢幕、縮放與捲動情境測試。若提示內容本身很長，改成可關閉的 popover 或 dialog 通常比持續嘗試 tooltip 方位更合理；可參考 HTML Popover API 的原生浮層選用。

用 @supports 保留可用的基本版#

把既有的相對定位或 JavaScript 浮層當成基線，再只在支援時套用 anchor 規則。這樣不支援的瀏覽器不會得到一個失去位置的資訊框。

1
.tooltip {
2
  /* 基線：既有的安全定位規則 */
3
  display: none;
4
}
5

6
@supports (anchor-name: --anchor) {
7
  .tooltip[data-open='true'] {
8
    display: block;
9
    position: absolute;
10
    position-anchor: --help;
11
    position-area: block-end;
12
  }
13
}