💬 CSS 툴팁 생성기 | 방향별 화살표 코드 복사

툴팁이 나올 방향

요소와의 간격

화살표 크기 (간격과 같게 두면 끝이 요소에 닿습니다)

최대 너비 (0이면 한 줄 유지)

글자 크기

안쪽 여백 — 위아래

안쪽 여백 — 좌우

모서리 반경

나타나는 시간 (직접 정하세요)

말풍선 배경색 (화살표도 같은 색)

글자색

요소에 마우스를 올리면 뜨는 툴팁을 CSS만으로 만들어 줍니다. 방향과 간격, 화살표 크기, 색, 글자 크기를 넣으면 말풍선과 화살표 선언을 함께 뽑아 주고, 바로 위 미리보기의 상자에 마우스를 올리거나 키보드로 초점을 옮겨 확인할 수 있습니다.

말풍선 글은 data-tip 속성에 넣고 CSS는 content: attr(data-tip)으로 읽습니다. 화살표는 너비와 높이가 0인 요소의 한쪽 테두리만 색을 주는 border 트릭이라 크기의 두 배가 상자 크기가 되고, 그래서 화살표 위치는 간격에서 화살표 크기의 두 배를 뺀 값이 됩니다. 간격과 화살표 크기를 같게 두면 화살표 끝이 요소에 정확히 닿습니다. 속성 동작은 W3C CSS Generated Content 명세를 따릅니다(2026년 10월 기준).

순수 CSS 툴팁은 화면 가장자리에서 잘릴 수 있으며 자동으로 방향을 바꾸지 않습니다. 또한 터치 기기에는 호버가 없으므로 중요한 정보를 툴팁에만 담지 마세요. 이 도구는 스크린 리더용 설명이나 자동 위치 보정 코드는 만들지 않습니다.

자주 묻는 질문

툴팁 글이 왜 CSS가 아니라 HTML 속성에 들어가나요?

content: attr(data-tip)으로 속성 값을 읽어 오기 때문입니다. 요소마다 다른 문구를 쓰면서 CSS는 한 번만 넣을 수 있습니다.

화살표 위치는 왜 간격에서 화살표 크기의 두 배를 빼나요?

화살표는 테두리로 만든 2배 크기 상자의 절반만 보입니다. 두 배를 빼면 보이는 삼각형의 평평한 면이 말풍선 아래쪽에 딱 붙습니다.

display: none으로 숨기면 안 되나요?

transition이 걸리지 않아 서서히 나타나지 않습니다. opacity와 visibility를 함께 쓰면 전환 효과를 유지하면서 마우스 이벤트도 막을 수 있습니다.

💬CSS 툴팁 코드 생성기

관련된 도구

CSS 순수 도형(삼각형) 코드 생성기

CSS Flexbox 레이아웃 코드 생성기

자주 묻는 질문

관련된 도구

CSS 순수 도형(삼각형) 코드 생성기

CSS Flexbox 레이아웃 코드 생성기

자주 묻는 질문

같은 카테고리 도구