[javascript] 자바스크립트 툴팁 (tooltip)

참고: https://stackdiary.com/hover-tooltip-javascript/

이 포스트에서는 JavaScript의 addEventListener 메소드를 활용해 선택한 요소에 대한 툴팁(hover effect)을 만드는 방법을 알아보겠습니다. 이는 attr() 속성을 사용하여 CSS로도 만들 수 있습니다.

.addEventListener()는 다양한 DOM 이벤트를 모니터링한 다음 해당 이벤트 타입에 따라 작업을 수행합니다. 이 글에서는 mouseover 및 mouseleave 이벤트에 중점을 두겠습니다. 다음은 결과물 확인을 위한 codepen 입니다.

See the Pen tooltip by shinyks (@shinyks) on CodePen.

코드는 상당히 간단합니다. getElementById를 사용하여 style.display 상태를 변경하려는 요소를 선택합니다. 물론 getElementByClassName을 사용해서도 툴팁을 추가할 수 이습니다.

이 접근 방법은 특정 버튼이 수행할 정확한 작업을 알려주기 위해 호버 툴팁을 추가하는 것으로 시각적 디자인 요소로서 자주 사용됩니다.

정리

이 포스트에서는 addEventListener 메소드를 사용하여 JavaScript로 호버 툴팁을 만드는 방법을 알아봤습니다. addEventListener 메소드를 사용하면 이벤트가 발생할 때 지정된 기능을 실행할 요소에 이벤트 리스너를 연결할 수 있습니다. 이 경우 addEventListener 메소드를 사용하여 mouseover 이벤트 리스너를 요소에 연결했습니다. 이렇게 하면 사용자가 요소 위로 마우스를 가져가면 툴팁이 표시됩니다. 이는 웹사이트 또는 웹 애플리케이션에 추가 정보 또는 컨텍스트를 추가하는 유용한 방법이 될 수 있습니다.

관련 글

자바스크립트 이벤트 등록 (addEventListener)