[javascript] 콘텍스트 메뉴에 툴팁 추가하기
웹 애플리케이션에서 콘텍스트 메뉴를 사용할 때 사용자에게 추가적인 정보를 제공하는 것은 유용합니다. 특히 툴팁을 통해 아이콘이나 메뉴 옵션의 기능을 설명하는 것은 사용자 경험을 향상시킬 수 있습니다. 여기에서는 자바스크립트를 사용하여 콘텍스트 메뉴에 툴팁을 추가하는 방법에 대해 알아봅니다.
HTML과 CSS로 콘텍스트 메뉴 및 툴팁 만들기
우선 HTML과 CSS로 콘텍스트 메뉴와 툴팁을 만들어봅시다.
HTML:
<div class="context-menu">
<div class="menu-option">Option 1</div>
<div class="menu-option">Option 2</div>
</div>
CSS:
.context-menu {
position: absolute;
background: #f2f2f2;
border: 1px solid #ccc;
padding: 5px;
}
.menu-option {
cursor: pointer;
}
.menu-option:hover:after {
content: "Tooltip Text";
display: inline-block;
position: absolute;
margin-top: -20px;
background: #333;
color: #fff;
padding: 5px;
border-radius: 3px;
font-size: 12px;
}
이 예시에서는 콘텍스트 메뉴를 표시하기 위해 .context-menu 클래스를 사용하고, 각 옵션에는 .menu-option 클래스를 적용했습니다. .menu-option:hover:after를 사용하여 툴팁을 보여주도록 설정하였습니다.
자바스크립트로 툴팁 활성화하기
이제 자바스크립트를 사용하여 툴팁을 활성화하는 코드를 추가해봅시다.
document.querySelectorAll('.menu-option').forEach(option => {
option.addEventListener('mouseover', function() {
const tooltip = this.getAttribute('data-tooltip');
const tooltipElement = document.createElement('div');
tooltipElement.classList.add('tooltip');
tooltipElement.textContent = tooltip;
document.body.appendChild(tooltipElement);
});
option.addEventListener('mouseout', function() {
document.querySelector('.tooltip').remove();
});
});
이 코드는 .menu-option 클래스를 가진 모든 요소를 찾아 mouseover 이벤트가 발생할 때 툴팁을 생성하고, mouseout 이벤트가 발생할 때 툴팁을 제거하는 기능을 구현합니다.
마치며
위의 방법을 따라하면 웹 애플리케이션에서 콘텍스트 메뉴에 툴팁을 추가할 수 있습니다. 사용자들은 옵션을 누르기 전에 툴팁을 통해 각 옵션에 대한 설명을 확인할 수 있어 편리합니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.