Web/CSS
[days05] 툴팁(Tooltip)
다연
2020. 12. 9. 18:51
반응형
툴팁
요소(element)위에 마우스 포인터를 올리면 그 요소의 추가적인 설명 정보를 보이게 하는 것
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
*{
box-sizing: border-box;
}
.tooltip{
border: 1px dotted black;
display: inline-block;
position: relative;
}
.tooltip .tooltiptext{
width: 120px;
background-color: black;
color: #fff;
border-radius: 6px;
padding: 5px 0;
position: absolute; /* 이걸 쓰니까 width가 먹음 */
text-align: center;
left: 50%;
bottom: 150%;
margin-left: -60px; /*width120의 반 */
visibility: hidden;
}
</style>
<style>
.tooltip .tooltiptext::after{
content:"";
/* clear: both;
display: table; */
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
position: absolute; /* 얘의 기준은 ? left:0 top:0하면 툴팁텍스트 의 가장 좌측 위임 */
left:50%;
top:100%;
margin-left: -5px;/* 보더 너비의 반 () */
}
.tooltip:hover .tooltiptext{
visibility: visible;
}
</style>
</head>
<body>
<h3>툴팁(Tooltip)</h3>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<div class="tooltip"> Hover over me
<span class="tooltiptext">Tooltip Text</span>
</div>
</body>
</html>
말풍선 밑의 뾰족한 표시는 어떻게 만든걸까?
div{
width: 40px;
border: 20px solid black;
border-right-color: transparent; /* 투명 */
border-bottom-color: transparent;
border-left-color: transparent;
box-sizing: border-box;
/* border-color: black transparent transparent transparent; */
}
그럼 말풍선을 밑으로 뜨게 하려면 ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
*{
box-sizing: border-box;
}
.tooltip{
border: 1px dotted black;
display: inline-block;
position: relative;
}
.tooltip .tooltiptext{
width: 120px;
background-color: black;
color: #fff;
border-radius: 6px;
padding: 5px 0;
position: absolute; /* 이걸 쓰니까 width가 먹음 */
text-align: center;
left: 50%;
top: 150%;
margin-left: -60px; /*width120의 반 */
visibility: hidden;
}
</style>
<style>
.tooltip .tooltiptext::after{
content:"";
/* clear: both;
display: table; */
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent ;
position: absolute; /* 얘의 기준은 ? left:0 top:0하면 툴팁텍스트 의 가장 좌측 위임 */
left:50%;
bottom:100%;
margin-left: -5px;/* 보더 너비의 반 () */
}
.tooltip:hover .tooltiptext{
visibility: visible;
}
</style>
</head>
<body>
<h3>툴팁(Tooltip)</h3>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<div class="tooltip"> Hover over me
<span class="tooltiptext">Tooltip Text</span>
</div>
</body>
</html>
옆으로 오게 하려면 ?
생각해보기
반응형