page title

툴팁 컴포넌트 사용을 우선적으로 고려한다.

HTML title 속성으로 제공되는 힌트 텍스트는 글자 크기, 표시 위치와 같은 스타일을 수정할 수 없어 툴팁을 필요로하는 사용자가 정보를 확인하기 어려울 수 있다. 또한 스크린 리더 환경설정에 따라 title 속성으로 제공된 힌트 텍스트가 음성으로 출력되지 않을 수 있으므로 가능한 툴팁 컴포넌트를 사용하는 것이 좋다.

팝오버 영역이 화면을 벗어나지 않도록 표현한다.

툴팁의 팝오버 영역이 시각적으로 확인할 수 없는 화면 밖의 영역에 배치되어 내부 콘텐츠가 가려지지 않도록 해야 한다.

팝오버 영역이 본문의 중요 콘텐츠를 가리지 않도록 표현한다.

툴팁의 팝오버 영역이 활성화 버튼과 부가 정보를 제공하고자 하는 본문 콘텐츠 요소를 가리지 않도록 적절한 표시 방향을 설정한다.

아이콘 버튼에 툴팁을 제공한다.

아이콘만으로 구성된 컨트롤 요소는 사용자에게 의미/용도를 정확하게 전달하기 어렵다. 그러므로 아이콘만으로 구성된 메뉴/기능 버튼에는 툴팁을 반드시 제공해야 한다.

툴팁은 부가적인 정보를 전달하는 데 사용한다.

사용자가 반드시 확인해야 하는 중요한 정보를 툴팁 팝오버에만 제공해서는 안 된다. 필수 정보는 사용자가 잘 발견할 수 있도록 별도의 상호작용 없이 본문에 표시하는 것이 적절하다.

툴팁 컴포넌트와 title 속성을 중첩하여 사용하지 않는다.

툴팁 컴포넌트와 title 속성이 동시에 사용되면 두 요소의 위치가 중첩되면서 설명이 정확하게 전달되기 어렵다. 스크린 리더 사용자에게도 동일한 설명이 여러 번 제공되므로 피로를 유발할 수 있다.

한 화면에 아이콘 툴팁과 맥락적 도움말 또는 도움말 패널을 혼용하지 않는다.

정보/물음표 아이콘 툴팁과 맥락적 도움말의 활성화 버튼은 동일하게 생겼으나 상호작용 방식이 다르므로 한 화면에 두 개의 요소를 혼용할 경우 사용자가 혼동을 느낄 수 있다. 만약 맥락적 도움말이나 도움말 패널 사용이 필요하다면 툴팁 대신 맥락적 도움말 컴포넌트를 사용한다.

터치 인터페이스에서의 사용성을 고려한다.

툴팁은 마우스, 키보드, 펜 인터페이스로만 실행할 수 있기 때문에 터치가 1차적인 입력 방식인 경우에는 사용자에게 부가적인 정보를 제공하기 어렵다. 이러한 상황을 고려하여 아이콘 버튼을 표현할 때는 메뉴/기능의 의미를 명확하게 보여줄 수 있는 아이콘을 선택해야 한다. 별도의 활성화 버튼이 존재한다면 터치 인터페이스가 탐지되었을 때, 활성화 버튼의 Click 이벤트에 팝오버의 출현이 토글 될 수 있도록 한다.