툴팁 보여주기
중요도: 5
툴팁(tooltip)을 보여주는 JS 코드를 작성해봅시다.
data-tooltip 속성이 있는 요소에 마우스를 가져다 대면 툴팁이 보여야 하고, 마우스 커서가 요소에서 떠나면 툴팁이 사라져야 합니다.
data-tooltip 속성은 다음 HTML처럼 추가할 수 있습니다.
<button data-tooltip="버튼 요소 길이보다 툴팁 길이가 훨씬 기네요.">짧은 버튼</button>
<button data-tooltip="두 줄짜리<br>툴팁">...또 다른 버튼...</button>답을 잘 작성했다면 아래 예시처럼 동작해야 합니다.
data-tooltip이 있는 요소엔 텍스트만 있다고 가정하겠습니다. 요소 안에 다른 태그가 있는 경우는 생각하지 않기로 합시다.
자세한 요구사항은 다음과 같습니다.
- 툴팁과 요소의 간격은
5px입니다. - 가능하면 툴팁은 요소를 기준으로 중앙에 있도록 합시다.
- 툴팁은 창 크기보다 커질 수 없습니다. 일반적인 경우라면 툴팁은 요소 위에 있을 텐데, 요소가 창 맨 위에 있어서 툴팁을 보여줄 공간이 없다면 툴팁은 요소 아래에 나타납니다.
- 툴팁안에 띄울 콘텐츠는
data-tooltip속성에서 가져옵니다. 속성값은 HTML일 수 있습니다.
원하는 기능을 구현하려면 다음 두 가지 이벤트가 필요합니다.
mouseover– 요소 안으로 포인터가 이동할 때 발생하는 이벤트mouseout– 요소 밖으로 포인터가 이동할 때 발생하는 이벤트
이벤트 위임을 사용해서 두 개의 핸들러만으로 원하는 기능을 구현하세요. document에 핸들러를 추가해 data-tooltip 속성이 있는 요소 안이나 밖으로 마우스 포인터가 이동하는 경우를 모두 감지하고 두 핸들러를 통해 툴팁을 보여주거나 감추시면 됩니다.
이렇게 툴팁 기능을 구현해 놓으면 자바스크립트에 익숙하지 않은 사람도 원하는 요소에 쉽게 툴팁을 보여줄 수 있을 겁니다.
P.S. 한 번에 한 개의 툴팁 만 보여줄 수 있습니다.