Softonic

CSS 툴팁 생성기

단계 1 / 2
다음

툴팁은 프로젝트에서 가장 먼저 자바스크립트 라이브러리를 끌어다 쓰게 되는 요소이지만, data-tooltip 속성으로 제어하는 단순한 ::after 가상 요소만으로도 실제 사례의 90%를 처리할 수 있습니다. 이 생성기는 필요한 .tooltip 및 .tooltip::after 규칙을 그대로 출력합니다. 위·아래·왼쪽·오른쪽 위치를 선택하고 배경색과 글자색을 조정한 뒤, 생성된 블록을 스타일시트에 복사하기만 하면 됩니다.

툴팁을 HTML에 연결하는 방법

  1. 1

    위치를 선택하세요

    위, 아래, 왼쪽, 오른쪽 중에서 선택합니다. 생성기는 `calc(100% + 8px)`와 알맞은 transform을 사용하므로 말풍선이 트리거 요소에 딱 붙어 표시됩니다.

  2. 2

    색상을 선택하세요

    배경색은 말풍선에, 글자색은 툴팁 라벨에 적용됩니다. 가독성을 위해 명암비를 4.5:1 이상으로 유지하세요.

  3. 3

    CSS를 복사하세요

    생성된 블록을 스타일시트에 붙여 넣으세요. `.tooltip`, `.tooltip::after`, `:hover` 규칙이 포함되어 있습니다.

  4. 4

    트리거 요소에 마크업하세요

    원하는 요소에 `class="tooltip" data-tooltip="표시할 텍스트"`를 추가하세요. `::after`는 `content: attr(data-tooltip)`을 통해 이 속성을 읽어들입니다.

순수 CSS 툴팁: 얻는 것과 포기하는 것

CSS만으로 만든 툴팁은 가볍고 빠르며 자바스크립트를 꺼도 동작합니다. 다만 DOM의 소스 순서 안에 위치하므로, 설계할 때 고려해야 할 몇 가지 제약을 함께 물려받습니다.

생성된 CSS가 하는 일

  • 트리거 요소를 position: relative로 설정해, 절대 위치의 툴팁이 그 요소에 고정되도록 합니다.
  • content: attr(data-tooltip)에서 라벨을 가져오므로 텍스트를 중복해서 작성할 필요가 없습니다.
  • transition: opacity 0.15s로 불투명도를 애니메이션 처리해, 표시가 빠르면서도 갑작스럽지 않게 느껴지도록 합니다.
  • 말풍선에 pointer-events: none을 지정해 트리거 요소에 대한 클릭을 절대 가로막지 않도록 합니다.

위치 계산

위치 오프셋 규칙
위 bottom: calc(100% + 8px); left: 50%; translateX(-50%)
아래 top: calc(100% + 8px); left: 50%; translateX(-50%)
왼쪽 right: calc(100% + 8px); top: 50%; translateY(-50%)
오른쪽 left: calc(100% + 8px); top: 50%; translateY(-50%)

접근성 관련 주의사항

  • data-tooltip은 스크린 리더가 읽어주지 않습니다. 해당 정보가 필수라면 aria-label이나 눈에 보이는 텍스트와 함께 제공하세요.
  • 키보드 사용자에게는 :hover뿐 아니라 :focus-visible도 필요합니다. 생성된 규칙을 .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }처럼 확장하세요.
  • 조상 요소의 overflow: hidden에 의해 잘리면 툴팁이 사라집니다. 트리거 요소를 잘림이 발생하는 컨테이너 밖으로 옮기거나, 요소가 밀집된 UI에서는 자바스크립트로 렌더링하는 팝오버로 전환하세요.

자주 묻는 질문

가상 요소를 사용하면 DOM을 깔끔하게 유지하고, 라벨 텍스트를 중복 작성하지 않아도 되며, 다른 요소와 실수로 겹칠 걱정 없이 툴팁을 스타일링할 수 있습니다. 다만 ::after의 콘텐츠는 보조 기술이 인덱싱할 수 없으므로, 중요한 텍스트는 aria-label로 보강하세요.

네. 두 번째 가상 요소(예: .tooltip::before)를 추가하고, 너비와 높이가 0인 상자에 색상이 있는 테두리를 조합해 모양을 만들면 됩니다. 이는 고전적인 CSS 삼각형 기법입니다. 이 모음에 포함된 「CSS 삼각형 생성기」를 사용하면 필요한 테두리 선언을 정확히 생성할 수 있습니다.

::after 규칙에 transition-delay: 0.3s를 추가하고, 마우스를 뗄 때는 0으로 재설정하세요. 또는 transition: opacity 0.15s 0.3s;를 사용하면 사라지는 시점은 늦추지 않으면서 나타나는 시점만 지연시킬 수 있습니다.

선택한 위치와 색상은 CSS를 만들기 위해 당사 서버로 전송되지만 저장되거나 재사용되지는 않습니다. 여러 단계로 구성된 페이지에서는 링크를 통해 단계 사이를 이동하며, 한 페이지로 된 화면에서는 아무것도 보관되지 않습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.

이 도구는 다른 언어로도 제공됩니다