툴팁Tooltip

도구(tool)에 붙은 팁(tip). 화면에 글자를 다 쓸 수 없을 때, 필요한 순간에만 짧은 설명을 띄우는 장치입니다. 핵심 성질은 잠깐이고 읽기 전용입니다. 마우스를 떼면 사라지고, 안에 버튼이나 링크를 넣지 않습니다.

언제 쓰나요

이름 없는 아이콘 버튼에 이름을 붙일 때가 가장 흔합니다. 잘라 붙인 축약어의 원래 말, 비활성화된 버튼이 왜 비활성인지도 툴팁의 일입니다.

반대로 꼭 읽어야 하는 정보를 툴팁에 숨기면 안 됩니다. 터치 화면에는 마우스 올리기(hover)가 없어서 툴팁이 아예 안 뜹니다. 필수 설명은 화면에 그냥 씁니다. 툴팁 하나에 한 줄, 길어야 두 줄입니다.

AI에게 시키기

툴바의 아이콘 버튼들에 툴팁을 붙여줘.
- hover 와 키보드 포커스 모두에서 뜨고, 약간의 지연(300ms) 후 표시
- 버튼 위쪽 가운데, 공간이 없으면 자동으로 아래로
- 작은 화살표가 버튼을 가리키게, 어두운 배경에 흰 글씨 한 줄
- 버튼에는 aria-label 도 함께. 툴팁 안에는 링크나 버튼을 넣지 말 것

"설명 띄워줘"라고 하면 title 속성 하나로 끝내는 경우가 많습니다. 그것은 브라우저 기본 툴팁이라 느리고 스타일이 안 맞습니다.

혼동 주의

• 팝오버(Popover): 클릭해서 열고 안에 버튼·폼·링크가 들어갑니다. 툴팁은 올리기만 해도 뜨고 읽기만 합니다.
• 토스트: 어떤 일이 벌어진 뒤 알려 주는 알림입니다. 툴팁은 무언가를 하기 전에 뜨는 설명입니다.
• 배지: 항상 보이는 짧은 상태 표시입니다. 툴팁은 필요할 때만 나타납니다.
• title 속성: HTML 기본 툴팁입니다. 되기는 하지만 1초 가까이 기다려야 뜨고 모양을 바꿀 수 없어서, 제품에서는 직접 만든 툴팁을 씁니다.