툴팁은 웹사이트나 애플리케이션에서 마우스를 올리면 해당 요소에 대한 추가 정보를 제공하는 데 사용되는 일반적인 기능입니다. 이번 블로그 포스트에서는 자바스크립트에서 ‘this’ 키워드를 활용하여 간단한 툴팁 기능을 개발하는 방법에 대해 알아보겠습니다.

HTML 구조 설정하기

먼저 HTML에 툴팁을 추가할 요소를 생성하는 것으로 시작합니다. 예를 들어, 아래와 같이 ‘tooltip’ 클래스를 가진 <span> 요소를 만들어보겠습니다.

<span class="tooltip">마우스를 올려보세요</span>

CSS 스타일 적용하기

툴팁 요소에 적합한 스타일을 지정하여 화면에 표시되도록 만들어야 합니다. display: none 속성으로 초기에 툴팁을 숨기고, 마우스를 올릴 때 툴팁을 표시하는 CSS를 작성해봅시다.

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(tooltip-text);
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}

.tooltip:hover::after {
  display: block;
}

자바스크립트로 툴팁 기능 추가하기

이제 자바스크립트를 사용하여 툴팁의 동작을 추가해보겠습니다. ‘this’ 키워드를 활용하여 각 툴팁 요소에 이벤트 처리기를 등록할 수 있습니다.

const tooltips = document.querySelectorAll('.tooltip');

tooltips.forEach((tooltip) => {
  tooltip.addEventListener('mouseover', function() {
    this.setAttribute('tooltip-text', '추가 정보입니다');
  });

  tooltip.addEventListener('mouseout', function() {
    this.removeAttribute('tooltip-text');
  });
});

위의 코드에서는 모든 ‘tooltip’ 클래스 요소를 선택하여 각각에 이벤트 처리기를 등록합니다. ‘mouseover’ 이벤트가 발생하면 해당 요소의 ‘tooltip-text’ 속성에 원하는 툴팁 내용을 설정하고, ‘mouseout’ 이벤트가 발생하면 ‘tooltip-text’ 속성을 제거하여 툴팁을 숨깁니다.

결과 확인하기

이제 HTML, CSS, 자바스크립트 코드가 모두 준비되었습니다. 웹 페이지를 열어 마우스를 툴팁 요소 위에 올려본 다음 추가 정보가 제공되는지 확인해보세요.

위 예제는 간단한 툴팁 기능의 개발 방법을 보여주기 위한 것입니다. 더 많은 툴팁 기능을 추가하려면 CSS를 수정하고 JavaScript 코드를 더 발전시켜야 할 수도 있습니다.

#tooltip #javascript