---
{"id":"tooltip","title":"툴팁","category":"컴포넌트","order":48,"summary":"hover·focus에서 비필수 짧은 보조 설명의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/tooltip/usage"]}
---

# 툴팁

## 목적과 사용

hover·focus에서 비필수 짧은 보조 설명에 사용합니다. 필수 오류·위험·가격 조건·클릭 가능한 링크를 넣지 않습니다.

## 구성과 변형

설명 대상, 짧은 텍스트, 노출·닫힘 상태. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- TIP-01 MUST: 키보드 focus에서도 정보를 얻을 수 있습니다.
- TIP-02 MUST: 필수 정보는 항상 보이는 도움말로 제공합니다.
- TIP-03 MUST: 버튼·링크가 필요한 설명은 팝오버로 분리합니다.
- TIP-04 SHOULD: 이미 설명이 충분한 요소에 중복 툴팁을 늘리지 않습니다.

## 접근성

대상의 접근 가능한 이름과 툴팁 설명을 구분합니다. Escape 닫힘, hover 이동 중 유지 등을 검증합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: 아이콘의 보조 설명 / 피함: 삭제 범위를 툴팁에만 표시.

## 우리 구현과 연결

제품별 툴팁 라이브러리의 기존 focus 계약을 보존합니다.

제품별 소유 경로는 [WICKEDVPS](product-vps.md), [Panel](product-panel.md), [Blesta](product-blesta.md)와 [소스 근거](source-evidence.md)를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

## 상태와 검증

마우스 없음·터치·화면 가장자리·긴 문구·Escape를 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. [검증 체크리스트](testing.md)에 증거를 연결합니다.