반응형
📌 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Tooltip</title>
<style>
body {
font-family: Arial, sans-serif;
height: 200vh; /* 스크롤 테스트를 위해 높이 추가 */
padding: 20px;
}
.tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px;
border-radius: 5px;
font-size: 14px;
max-width: 300px;
word-wrap: break-word;
display: none;
z-index: 1000;
}
input {
width: 300px;
padding: 5px;
}
</style>
</head>
<body>
<input type="text" id="inputField" value="이것은 너무 길어서 input 창에 다 안보이는 값입니다. 여기에 마우스를 올려보세요.">
<div id="tooltip" class="tooltip"></div>
<script>
const inputField = document.getElementById("inputField");
const tooltip = document.getElementById("tooltip");
inputField.addEventListener("mouseover", function() {
tooltip.textContent = inputField.value;
tooltip.style.display = "block";
});
inputField.addEventListener("mousemove", function(event) {
// pageX, pageY를 사용하여 스크롤 영향을 받지 않도록 조정
tooltip.style.top = (event.pageY + 10) + "px";
tooltip.style.left = (event.pageX + 10) + "px";
});
inputField.addEventListener("mouseout", function() {
tooltip.style.display = "none";
});
</script>
</body>
</html>반응형
'개발 > Javascript' 카테고리의 다른 글
| 7일차: 자바스크립트 심화 개념 및 실습 프로젝트 (1) | 2025.02.02 |
|---|---|
| 6일차: DOM 조작과 이벤트 처리 (0) | 2025.02.01 |
| 5일차: 객체와 배열 (0) | 2025.01.31 |
| 자바스크립트에서 null과 undefined의 차이점 완벽 분석 (0) | 2025.01.31 |
| 4일차: 함수와 스코프 (0) | 2025.01.30 |