텍스트나 이미지에 마우스를 가져다 가면 추가 설명처럼 툴팁 박스가 보이게 하는 소스(마우스오버 툴팁스) 입니다.
마우스오버 툴팁 나타내기 소스코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<br><br><br>
<div style="width:100%; max-width:1200px; margin:30px auto;">
<div class="tooltip">
<span class="tooltiptext" id="myTooltip">마우스 오버시 툴팁이 나타납니다.</span>여기!!
</div>
</div>
</body>
</html>인터넷에서 또는 챗GPT를 통해 필요한 소스를 기록형으로 남기고 있습니다. 다른 글은 여기서 확인 가능 합니다.
Tooltips 관련 글
https://www.w3schools.com/css/css_tooltip.asp
https://getbootstrap.com/docs/4.0/components/tooltips
