Tooltip

MSK Tooltip은 짧은 안내를 버튼, 아이콘, 비활성 상태에 붙이는 Core UI Kit primitive입니다. HTML 문자열을 렌더링하지 않고 textContent만 사용하므로 tooltip 메시지에 rich text를 넣지 않습니다. 서식이 필요한 안내는 popover나 dialog로 분리합니다.

Preview

아래 미리보기는 운영 문서 Docker build context 안에서 동작하는 preview입니다. 실제 제품 구현 SOT는 platform/web/laravel/core/Base/UiKit/입니다.

Data API

<button
  type="button"
  data-msk-tooltip="편집 모드에서는 본문+노트로 고정됩니다."
  data-msk-tooltip-placement="right"
>
  본문+노트
</button>

resources/js/app.js에서 initMskUiKit()을 한 번 호출하면 data-msk-tooltip 요소가 자동 초기화됩니다.

JavaScript API

window.MSK.ui.tooltip.show(button, {
  message: '편집 모드에서는 본문+노트로 고정됩니다.',
  placement: 'right',
});

window.MSK.ui.tooltip.hide(button);

Options

옵션	기본값	설명
`message`	`data-msk-tooltip`	표시할 텍스트
`placement`	`top`	`top`, `right`, `bottom`, `left`
`delay`	`120`	표시 지연 시간(ms)
`hideDelay`	`40`	숨김 지연 시간(ms)
`gap`	`10`	anchor와 tooltip 사이 거리(px)
`viewportPadding`	`16`	viewport 경계 여백(px)

Theme Tokens

:root {
  --msk-ui-radius-md: 8px;
  --msk-ui-z-tooltip: 70;
  --msk-ui-color-tooltip-bg: #111827;
  --msk-ui-color-tooltip-fg: #ffffff;
  --msk-ui-shadow-floating: 0 12px 32px rgb(15 23 42 / 0.18);
}

프로젝트는 컴포넌트 내부 CSS를 복사하지 않고 token만 재정의합니다.

Accessibility

Tooltip element는 role="tooltip"을 사용합니다.
Anchor에는 표시 중 aria-describedby가 자동 연결됩니다.
focusin, focusout, mouseenter, mouseleave, Escape를 지원합니다.
prefers-reduced-motion: reduce 환경에서는 전환 효과를 제거합니다.

Migration

프로젝트 안의 인라인 tooltip은 다음 순서로 이전합니다.

data-msk-tooltip과 data-msk-tooltip-placement를 anchor에 추가합니다.
기존 local tooltip DOM/CSS/JS를 제거합니다.
복잡한 HTML 안내는 tooltip이 아니라 popover/dialog 대상으로 분리합니다.
모바일 viewport에서 위치 보정이 의도대로 되는지 확인합니다.

Preview​

Data API​

JavaScript API​

Options​

Theme Tokens​

Accessibility​

Migration​