본문 바로가기
CSS

[Css] 툴팁이란? 흔히 보는 툴팁 사용 예

키미추 2021. 1. 11. 14:14

마우스 포인터를 텍스트(글자) 위에 올릴때 나타나는 팁(설명) 나타내기

 

 

툴팁이란?

마우스 포인터를 특정 텍스트나 이미지 같은 요소에 올릴때 나타나는 팁(설명)입니다.

주로 div요소나 position요소를 사용하여 나타냅니다.

 

 

툴팁 사용 예시1

-div요소로 만들어진 기본 툴팁

마우스를 아래 텍스트 위에 올려보세요.

▶여기에◀ 툴팁입니다

 

 

 

<style>
.tooltip1 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip1 .tooltiptext1 {
  visibility: hidden;
  width: 120px;
  height: 30px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip1:hover .tooltiptext1 {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>마우스를 아래 텍스트 위에 올려보세요.</h2>

<div class="tooltip1">▶여기에◀
  <span class="tooltiptext1">툴팁입니다</span>
</div>

 

툴팁 사용 예시2

-position요소로 만들어진 말풍선 모양 툴팁

마우스를 아래 텍스트 위에 올려보세요.

▶이곳에◀ 말풍선모양 툴팁

 

 

 

<style>
.tooltip2 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip2 .tooltiptext2 {
  visibility: hidden;
  width: 130px;
  height: 30px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip2 .tooltiptext2::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip2:hover .tooltiptext2 {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>마우스를 아래 텍스트 위에 올려보세요.</h2>

<div class="tooltip2">▶이곳에◀
  <span class="tooltiptext2">말풍선모양 툴팁</span>
</div>

 

툴팁 사용 예시3

-기타 요소를 사용해 스타일 변화를 준 툴팁

마우스를 아래 글자 위에 올려보세요.

▶이곳에◀ 스타일을 준 툴팁

 

 

 

<style>
.tooltip3 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip3 .tooltiptext3 {
  visibility: hidden;
  width: 130px;
  height: 30px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

.tooltip3:hover .tooltiptext3 {
  visibility: visible;
  opacity: 1;
}

.tooltip3 .tooltiptext3::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
</style>
<body style="text-align:center;">

<h2>마우스를 아래 글자 위에 올려보세요.</h2>

<div class="tooltip3">▶이곳에◀
    <span class="tooltiptext3">스타일을 준 툴팁</span>
</div>

문의는 아래 댓글로 남겨주세요.//////////////////////////////////////////////////////////////////////////////////////////

 

저작자표시

'CSS' 카테고리의 다른 글

[CSS] 마우스 올릴때 점점 늘어나는 네모칸 상자 만들기  (10) 2021.01.19
[CSS] 코드로 회전하는 '로딩중...'표시 만드는 법  (8) 2021.01.15
[CSS] 글자,이미지 중앙 가운데 정렬하는 방법  (11) 2021.01.04
[Css] float을 이용한 정렬,개념 & 예제  (2) 2020.11.08
[Css] 글자,텍스트에 그라데이션 만들기 & 예제  (0) 2020.11.07

비슷한 사용자들이 많이 본 글

티스토리툴바