Tooltip

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/tooltip.css" />

Live

버튼에 마우스를 올려 툴팁을 확인하세요.

Directions

Top
툴팁내용
Bottom
툴팁내용
Left
툴팁내용
Right
툴팁내용

Specs

요소 값 토큰
배경 #111827 gray-900
텍스트 14px · white · Pretendard Regular font-size-label
Padding 8px spacing-2
Border Radius 8px radius-md
화살표 10px × 5px 삼각형 (CSS border) —
트리거 간격 6px —

Code

<!-- Top -->
<div class="tooltip-wrap">
  <button aria-describedby="my-tooltip">Trigger</button>
  <div class="tooltip tooltip--top" role="tooltip" id="my-tooltip">
    <span class="tooltip__text">툴팁내용</span>
  </div>
</div>

<!-- Bottom -->
<div class="tooltip-wrap">
  <button>Trigger</button>
  <div class="tooltip tooltip--bottom" role="tooltip">
    <span class="tooltip__text">툴팁내용</span>
  </div>
</div>

<!-- Left -->
<div class="tooltip-wrap">
  <button>Trigger</button>
  <div class="tooltip tooltip--left" role="tooltip">
    <span class="tooltip__text">툴팁내용</span>
  </div>
</div>

<!-- Right -->
<div class="tooltip-wrap">
  <button>Trigger</button>
  <div class="tooltip tooltip--right" role="tooltip">
    <span class="tooltip__text">툴팁내용</span>
  </div>
</div>

Classes

클래스 타입 설명
.tooltip-wrap 루트 트리거와 툴팁을 묶는 래퍼 — position: relative · hover/focus-within 시 툴팁 표시
.tooltip 요소 툴팁 말풍선 — 기본 숨김, position: absolute
.tooltip--top 수정자 트리거 위 · 화살표 아래
.tooltip--bottom 수정자 트리거 아래 · 화살표 위
.tooltip--left 수정자 트리거 왼쪽 · 화살표 오른쪽
.tooltip--right 수정자 트리거 오른쪽 · 화살표 왼쪽
.tooltip__text 요소 텍스트 버블 — gray-900 배경 · white 텍스트 · ::after 화살표