CSS 툴팁. JS 없이 호버 메시지.
💭 미리보기 (마우스 올려보세요)

사용법

  1. 툴팁 텍스트 + 대상 텍스트 입력
  2. 위치 (위·아래·왼·오)
  3. 색상·모서리·화살표 크기
  4. 애니메이션 (페이드·확대·슬라이드)
  5. HTML+CSS 복사 → 프로젝트에 적용

주요 기능

  • 4가지 위치 (위·아래·왼·오)
  • 화살표 자동 (CSS triangle)
  • 4가지 애니메이션
  • JS 없이 :hover로만 작동
  • data-tooltip 속성 기반 (재사용 ✓)

활용 예시

  • 아이콘 버튼 설명 — 작은 아이콘 호버 시 텍스트
  • 약어 풀어쓰기 — "API" 호버 → "Application Programming Interface"
  • 폼 필드 도움말 — "비밀번호 8자 이상" 안내
  • 비활성 버튼 — "권한이 필요합니다" 설명
  • 차트 데이터 포인트 — 값 표시

CSS 툴팁의 장점

(1) JS 불필요 — 빠르고 가볍고 안전. (2) data-tooltip 속성으로 어디든 재사용. (3) ::before·::after로 풍선 + 화살표 동시 표현. (4) 모든 브라우저 지원 (IE 9+). 단, 모바일에선 hover 안 되니 :focus·:active 추가 필요.

자주 묻는 질문

모바일에서?

모바일은 hover 없음. :focus 추가하거나, JS 라이브러리(Tippy.js 등) 사용 권장.

긴 텍스트?

40자 이내가 가독성 좋음. 더 길면 별도 모달 권장.

React에서?

className 적용. data-tooltip은 props로 동적 변경 가능.

접근성?

실제 접근성 위해선 `aria-describedby` + 별도 hidden 요소 권장. 이건 시각적 효과.

무료?

네.