JS Design System v0.6

Tooltip

아이콘 버튼의 이름이나 짧은 보조 설명을 hover/focus 시 보여줍니다. 필수 정보를 툴팁에만 두지 않습니다.

1. Default

요소 위쪽에 뜨는 기본 위치입니다.

목록을 다시 불러옵니다

2. Position

기본 위. .bottom / .left / .right. 예제는 .show 로 항상 표시.

위 (기본) 아래 왼쪽 오른쪽

3. On Hover / Focus

실제 동작. 아이콘 버튼 위에 마우스를 올리거나 포커스하세요. aria-describedby 로 연결.

새로 고침 필터 삭제

4. Multiline

두 줄 이상은 .multi (폭 220). 그 이상 설명은 Popover/도움말 링크.

검토 필요서명이 확인되지 않은 실행 파일입니다. 24시간 내 처리하지 않으면 자동 차단됩니다.

Props

HTML 에서는 클래스와 속성으로, React(@jiran/ds-react)에서는 같은 이름의 prop(variant · size …)으로 변형·상태를 지정합니다.

Prop / ClassType · ValuesDefaultDescription
.tooltip-wrapcontainer—position:relative 트리거 래퍼
.tooltipspan—role=tooltip. 기본 위치 위
position.bottom | .left | .righttop위치
.showbooleanfalse강제 표시(문서·디버그)
.multibooleanfalse여러 줄, 폭 220

Usage

React: @jiran/ds-react 패키지를 설치하고 style.css 를 한 번 import 하면 위 React 탭 코드를 그대로 쓸 수 있습니다(React Package). HTML: assets/style.css 를 연결하고(일부만 필요하면 아래 컴포넌트 CSS 복사), 동작이 필요하면 assets/ds.js 를 함께 넣습니다 — 이 페이지의 프리뷰가 그 스크립트로 동작합니다. 색은 전부 토큰(var(--accent) 등)을 참조하므로 --accent-* 만 제품 컬러로 바꾸면 됩니다.

React @jiran/ds-react

npm i @jiran/ds-react

// main.tsx — 앱 진입점에서 한 번
import "@jiran/ds-react/style.css";

// 컴포넌트
import { Tooltip } from "@jiran/ds-react";

HTML

<!-- 1) 토큰 + 전체 컴포넌트 스타일 한 번에 연결 -->
<link rel="stylesheet" href="assets/style.css">
<!-- 동작(드롭다운·탭·달력·표 정렬/선택·토스트 등) — 순수 JS 한 파일. React 제품은 불필요 -->
<script src="assets/ds.js" defer></script>

<!-- 2) 또는 아래 "Component CSS" 만 프로젝트 CSS 에 붙이고,
        :root 토큰은 Foundations › Design Token 에서 복사 -->

Component CSS .tooltip, .tooltip-wrap

/* JS Design System v0.6 · .tooltip, .tooltip-wrap · 토큰(var(--*))은 assets/style.css :root 참고 */
.tooltip-wrap{position:relative;display:inline-flex}
.tooltip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--bg-inverse);color:var(--text-inverse);font-size:12px;font-weight:500;line-height:1.4;padding:6px 10px;border-radius:6px;white-space:nowrap;box-shadow:var(--shadow-2);z-index:10;pointer-events:none;opacity:0;transition:opacity var(--motion-fast)}
.tooltip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--bg-inverse)}
.tooltip.bottom{bottom:auto;top:calc(100% + 8px)}
.tooltip.bottom::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--bg-inverse)}
.tooltip.left{left:auto;right:calc(100% + 8px);bottom:50%;transform:translateY(50%)}
.tooltip.left::after{left:100%;top:50%;transform:translateY(-50%);border-top-color:transparent;border-left-color:var(--bg-inverse)}
.tooltip.right{left:calc(100% + 8px);bottom:50%;transform:translateY(50%)}
.tooltip.right::after{left:auto;right:100%;top:50%;transform:translateY(-50%);border-top-color:transparent;border-right-color:var(--bg-inverse)}
.tooltip-wrap:hover .tooltip,.tooltip-wrap:focus-within .tooltip,.tooltip-wrap.show .tooltip{opacity:1}
.tooltip.multi{white-space:normal;width:220px;text-align:left}