CSS: tooltip ​

.instui-tooltip — CSS 호버 및 포커스 툴팁 버블로, 어느 쪽이든 위치 지정 가능.

토글은 순수 CSS(:hover/:focus-within)로 동작하므로 버블은 포커스 가능한 트리거를 통해서만 키보드 사용자에게 도달합니다; popover와 달리 해제 가능하거나 클릭으로 트리거되지 않습니다.

Source: tooltip.css

TIP

JS 향상 — 이 컴포넌트의 CSS는 자체적으로 렌더링되고 동작합니다; 상호작용 동작을 추가하려면 @pantoken/interactions와 짝지으세요. 아래 수정자 표를 참고하세요.

접근성 ​

aria-describedby로 트리거가 버블을 가리키게 하고 버블에 role="tooltip"을 부여하세요.

사용법 ​

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

예제들 ​

html
<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>

구조 ​

text
.instui-tooltip
  [class*="-icon-"] (0..1)
  .tip
flowchart TD n0[".instui-tooltip"]:::cssdoc-root n1("[class*=&quot;-icon-&quot;]"):::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 — 포인터가 있는 관련 고정 표면.