Tooltip 提示

輕量的 hover／focus 提示。不是對話框：沒有遮罩、沒有焦點陷阱，也不會移走焦點。

預設是深色 tip（--gk-color-on-surface 底、--gk-color-surface 字），最大寬 240px、內距 6px 10px、圓角 --gk-radius-sm、陰影 --gk-shadow-md、z-index 4000。顯示延遲預設 200ms，隱藏 100ms。

範例

位置

top、bottom、left、right，以及 -start／-end。靠近視窗邊緣時會翻轉。

上方下方左側右側

<gk-tooltip content="儲存目前編輯" placement="top"><gk-button>上方</gk-button></gk-tooltip>

箭頭

arrow（別名 show-arrow）預設開啟。設 arrow="false" 可隱藏 8px 三角。

有箭頭無箭頭

<gk-tooltip content="有箭頭"><gk-button>箭頭</gk-button></gk-tooltip>
<gk-tooltip arrow="false" content="無箭頭"><gk-button>無箭頭</gk-button></gk-tooltip>

長文換行

文字在 240px 內換行，不會把字縮到難以閱讀。

長提示

<gk-tooltip content="較長的提示會在 240px 內換行。"><gk-button>長文</gk-button></gk-tooltip>

停用

disabled 時不會出現提示。

停用

<gk-tooltip disabled content="不會出現"><gk-button>停用</gk-button></gk-tooltip>

僅聚焦

trigger 可為 hover、focus 或 hover focus（預設）。Esc 會隱藏提示且不移動焦點。update:show 帶出下一個布林值。

用 Tab 移到我

<gk-tooltip trigger="focus" content="僅鍵盤"><gk-button>聚焦</gk-button></gk-tooltip>

Alpine

<gk-tooltip content="儲存" placement="top">
  <button type="button">儲存</button>
</gk-tooltip>

API

屬性

屬性	型別	預設
content	string	''
placement	'top' | 'bottom' | 'left' | 'right' 與 -start／-end	'top'
trigger	'hover' | 'focus' | 'hover focus'	'hover focus'
arrow／show-arrow	boolean	true
delay	number | 'show,hide'	顯示 200／隱藏 100
disabled	boolean	false
show	boolean	false

Slots

名稱	說明
default	觸發器
content	提示內容。未提供時使用 content 屬性

事件

名稱	內容
update:show	下一個 boolean

CSS parts

trigger、tip、arrow。

顯示時 tip 為 role="tooltip"，並在觸發器上設定 aria-describedby。tip 以 position: fixed 留在 Shadow 內（z-index 4000），因此 ::part(tip) 可用，也不會被未建立包含塊的 overflow: hidden 祖先裁切。

位置

偏好的一側放不下時，主軸會翻轉（上 ↔ 下、左 ↔ 右）。start／end 對齊保留，再以約 8–10px 間距夾在視窗內。