다연이네

[days05] 툴팁(Tooltip) 본문

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>

 

 

옆으로 오게 하려면 ?

 생각해보기

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days06] setTimeout/setInterval  (0) 2020.12.16
[days05] CSS 전역변수와 document.querySelector  (0) 2020.12.09
[days05] 1) 로딩 이미지 처리 2) 이미지 흔들기  (0) 2020.12.09
[days05] CSS 애니메이션  (0) 2020.12.09
[days05] CSS 전환 - transition  (0) 2020.12.09
'Web/CSS' Related Articles more
Comments