JavaScript의 호버에 대한 도구 설명
Muhammad Muzammil Hussain
2024년2월15일
이 문서에서는 도구 설명을 만들고 HTML 및 JavaScript를 사용하여 마우스 호버에 표시하는 방법에 대해 설명합니다.
자바스크립트 툴팁
HTML 및 JavaScript에서는 작은 상자를 만들고 도구 설명으로 표시 여부를 전환할 수 있습니다. JavaScript 사용자 지정 함수를 사용하여 도구 설명의 가시성을 활성화하거나 비활성화하는 작업을 처리합니다.
HTML 및 JavaScript를 사용하는 마우스 호버의 도구 설명
호버 이벤트는 웹 페이지의 구성 요소를 클릭하지 않고 마우스 커서를 놓으면 트리거됩니다.
JavaScript에서는 사용자가 항목에 커서를 놓을 때마다 마우스 호버에서 툴팁 상자를 호출하고 토글할 수 있으며 툴팁을 팝업 메시지로 표시할 수 있습니다.
HTML과 CSS를 사용하여 툴팁 기능을 만들 수 있습니다. 도구 설명을 만들고 항목에 대한 일부 텍스트를 표시하면 웹 페이지의 초기 공간이 절약됩니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.class {
-webkit-user-select: none;
position: relative;
}
.displayText {
position: absolute;
bottom: -230%;
left: 50%;
margin-left: -80px;
width: 160px;
background-color: lightgrey;
text-align: center;
border-radius: 6px;
padding: 8px 0;
visibility: hidden;
}
.displayText::before {
content: "";
border-width: 5px;
border-style: solid;
top: -28%;
left: 35%;
border-color: transparent transparent lightgrey transparent;
position: absolute;
}
.show {
visibility: visible;
}
</style>
</head>
<body>
<h2>DelftStack learning</h2>
<h3>JavaScript open tooltip on hover</h3>
<div class="class" onmouseover="openToolTip()">Hover on me to open ToolTip
<span class="displayText" id="displayText">ToolTip Text</span> <! –– tooltip box and text ––>
</div>
<script>
function openToolTip () {
var tooltipPopup = document.getElementById("displayText");
tooltipPopup.classList.toggle("show"); // toggle the tooltip
}
</script>
</body>
</html>
출력:
위의 html 소스에서는 웹 페이지에 상자를 만드는 div 태그 <div></div>를 사용했습니다. <div> 태그는 클래스를 정의하고 onmouseover 기능을 사용하여 openToolTip() 기능을 호출합니다.
<div> 내부에서 <span> 요소를 툴팁 텍스트로 사용하고 id를 정의했습니다. <script> 태그에서 openToolTip() 함수를 선언하고 토글 메서드를 호출하고 "show"를 전달했습니다.
여기에서 CSS는 툴팁의 가시성을 처리하고 툴팁의 기본 스타일 및 위치 지정을 위해 CSS 속성을 사용했습니다.