CSS: tooltip

.instui-tooltip — 一個 CSS 的懸停與聚焦提示氣泡，可定位於任一側。

切換純屬 CSS（:hover/:focus-within），因此該氣泡只能透過可聚焦的觸發器讓鍵盤使用者使用；與 popover 不同，無法被取消且非點擊觸發。

Source: tooltip.css

TIP

JS 加強 — 此元件的 CSS 可獨立呈現並運作；與 @pantoken/interactions 配對可新增互動行為。請參閱下方的 修飾子表格。

無障礙

使用 aria-describedby 將觸發器指向氣泡，並為氣泡設定 role="tooltip"。

使用方法

@import "@pantoken/components/components.css";
@import "@pantoken/components/tooltip.css";

範例

<span class="instui-tooltip">
  <button class="instui-button" type="button" aria-describedby="placement-tip">位置</button>
  <span class="tip -placement-bottom" id="placement-tip" role="tooltip">此工具提示顯示在下方。</span>
</span>

結構

.instui-tooltip
  [class*="-icon-"] (0..1)
  .tip

flowchart TD n0[".instui-tooltip"]:::cssdoc-root n1("[class*="-icon-"]"):::cssdoc-part n2(".tip"):::cssdoc-part n0 -.->|0..1| n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

修飾器

修飾器	說明
.-icon-*	在提示氣泡旁呈現一個觸發用字形圖示。

部件

部件	說明
.tip	該氣泡；其側向由 -placement-* 設定。

已使用的代幣

Token	型別	值
--instui-border-radius-sm	<length>	0.25rem
--instui-color-background-inverse	<color>	LightDarklight-dark(#334450, #F2F4F5)
--instui-color-text-inverse	<color>	LightDarklight-dark(#ffffff, #1C222B)
--instui-component-tooltip-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-tooltip-font-size	<length>	0.875rem
--instui-component-tooltip-font-weight	<integer>	400
--instui-component-tooltip-padding	<length>	0.75rem
--instui-spacing-space-xs	<length>	0.25rem

相關

• popover — 較大的、以點擊觸發的錨定面板。
• context-view — 一個相關的、帶指向器的錨定面板。