[jQuery] jQuery 이벤트 드리블링을 활용한 툴팁 기능 구현

26 Dec 2023

jQuery

jQuery를 사용하여 간단한 툴팁(Tooltip) 기능을 구현할 수 있습니다. 이때, 이벤트 드리블링(Event Delegation)을 활용하면 동적으로 생성된 요소에도 툴팁을 적용할 수 있습니다. 이 기능을 구현하기 위해 다음과 같은 절차를 따릅니다.

구현 절차

HTML 구조 만들기

툴팁을 표시할 대상이 될 HTML 요소를 마크업합니다. 예를 들어, <span> 태그로 감싼 텍스트나 이미지를 툴팁 대상으로 설정합니다.
```
<span class="tooltip-trigger" data-tooltip="이 텍스트는 툴팁입니다.">툴팁을 표시할 텍스트</span>
```
CSS 스타일링

툴팁을 디자인하기 위해 CSS를 이용합니다. 툴팁을 숨겨두고, 마우스 오버 등의 이벤트 발생 시 표시되도록 스타일을 설정합니다.
```
.tooltip {
    position: absolute;
    display: none;
    /* 기타 스타일 설정 */
}
```

jQuery로 툴팁 기능 구현

jQuery를 사용하여 툴팁을 활성화하는 함수를 작성합니다. 여기서는 이벤트 드리블링을 사용하여 동적으로 생성된 툴팁 대상에도 작동하도록 구현합니다.

$(document).on('mouseenter', '.tooltip-trigger', function() {
    var tooltipText = $(this).data('tooltip');
    var tooltip = $('<div class="tooltip">' + tooltipText + '</div>');

    $(this).append(tooltip);
    tooltip.fadeIn();
});

$(document).on('mouseleave', '.tooltip-trigger', function() {
    $('.tooltip').fadeOut(function() {
        $(this).remove();
    });
});

툴팁 관련 이벤트 핸들러 등록

문서가 로드될 때 툴팁 관련 이벤트 핸들러를 등록하는 jQuery 코드를 작성합니다.
```
$(document).ready(function() {
    // 툴팁 관련 이벤트 핸들러 등록
});
```

결론

jQuery의 이벤트 드리블링을 활용하여 동적으로 생성된 요소에도 툴팁을 적용할 수 있습니다. 이를 통해 웹 페이지의 사용자 경험을 향상시킬 수 있습니다.

참고 자료:

jQuery 공식 문서