c23. CSS 툴팁 또는 말풍선

CSS 툴팁 또는 말풍선

말풍선 또는 툴팁

사용자가 커서로 항목을 가리키면

말풍선 또는 툴팁(tooltip)

이 나타납니다.

CSS 로 말풍선 (Tooltip) 을 만들어 봅니다.

말풍선 (tooltip) 은 마우스가 태그 위로 올라가면 추가적인 정보가 보이도록 하는 기능입니다.

---

우선 HTML 태그부터 시작합니다.

먼저 컨테이너 태그 (여기서는 p 태그) 를 하나 정해서 "tt" 라는 클래스를 지정하였습니다. 

<p class="tt">

마우스가 이 p 태그 위로 올라가면, 말풍선 글자 들이 보이게 될 것입니다.

이 말풍선 글자는 인라인 태그 (inline element, 줄바꿈을 안하는 태그) 인 <span> 태그에 담고 "tt-text" 라는 클래스를 지정하였습니다.

<span class="tt-text">또는 툴팁(tooltip)</span>

---

그 다음 CSS 에서, "tt" 클래스에서 말풍선의 위치를 position: relative; 로 지정합니다. 

.tt {
position: relative;
display: inline-block;
border-bottom: 2px dotted Sienna;
background-color: yellow;
}
 

그리고, 말풍선이 작동하면 나타날 글자 들은 position:absolute; 로 지정하여, 부모인 말풍선의 위치에 종속되게 할 것입니다.

"tt-text" 클래스에 실제 말풍선에 나타날 글자들의 속성을 지정합니다. 

기본값으로 숨겨져 있습니다 (visibility: hidden;).

폭을 한 200px 정도로 하고 배경과 텍스트 색상도 지정하고, 텍스트를 가운데로 정렬하고 패딩을 주어 풍선이 부풀어 보이게 하였습니다.

CSS3 테두리-반경 속성 (border-radius property) 으로 말풍선의 테두리를 둥글게 하였습니다.

.tt .tt-text {
visibility: hidden;
width: 200px;
background-color: Indigo;
color: Yellow;
text-align: center;
border-radius: 10px;
padding: 10px 5px;
position: absolute;
z-index: 1;
...
}

위에서 .tt .tt-text {} 는 CSS 컴비네이터 인데, .tt 클래스의 후손중에 .tt-text 클래스라는 의미입니다.

---

풍선이 뜨는 위치를 가운데 아래로 하고 싶어서, top: 200%; left: 50%; margin-left: -100px; 으로 하였습니다. 

top: 200%; 풍선이 아래쪽으로 두줄 정도 떨어져 보이도록 합니다.
left: 50%; 풍선의 기준 위치를 왼쪽에서 50% 지점, 즉 가운데로 하였습니다.
margin-left: -105px; 는 풍선의 크기가 width: 200px; 에 패딩이 좌우로 5px씩 차지하여 총 210px 이므로, 풍선의 가운데가 오려면 이 폭의 절반 만큼 왼쪽으로 이동시켜야 했습니다.

.tt .tt-text {
...
top: 200%;
left: 50%;
margin-left: -105px;
}

---

:hover 선택자 (:hover selector) 는 사용자가 마우스를 <p class="tt"> 태그에 올리면 숨겨져 있던 말풍선 텍스트 들을 나타나게 할 것입니다.
.tt:hover .tt-text {
visibility: visible;
}

---

마지막으로 말풍선의 풍선 테두리에 삼각형 화살표를 달아 보겠습니다.

방법은 .tt .tt-text::after {} 라는 가상-태그 클래스를 정해서, 풍선 다음의 내용을 비우고 (content: "";), 테두리-색상 속성으로 화살표를 그려 주게 됩니다.

이 때 위쪽 화살표는, 테두리-색상 (border-color:) 속성에서, 위, 오른쪽, 아래, 왼쪽 순으로 색상을 지정할 때,

세번째 아래쪽만 색상을 넣고 나머지는 모두 투명 (transparent) 하게 바꾸어 주면 됩니다 (border-color: transparent transparent Indigo transparent;).

화살표의 표시 위치는 기준점을 풍선 기준으로 bottom: 100%; left: 50%; 로 하여 위쪽, 및 수평 가운데로 오게 하였습니다.

화살표의 기준점이 가운데로 오긴 했으나, 화살표 자체가 차지하는 영역이 있으므로, 화살표의 중심을 기준점으로 옮겨 주어야 정가운데에 화살표가 나타날 것입니다.

테두리 속성에 의해 화살표를 그리고 있는데, 테두리-폭이 border-width: 10px; 이면, 화살표에서는 높이가 10px 이고, 바닥이 20px 인 삼각형이 됩니다.

따라서 화살표를 좌측으로 10 만큼 이동시켜야 합니다 (margin-left: -10px;).

이렇게 하여 풍선과, 풍선 위의 화살표 까지 모두, 말의 가운데 아래쪽에 오게 하였습니다.
.tt .tt-text::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent Indigo transparent;
}

---

<style>
.tt {
position: relative;
display: inline-block;
border-bottom: 2px dotted Sienna;
background-color: yellow;
}

.tt .tt-text {
visibility: hidden;
width: 200px;
background-color: Indigo;
color: Yellow;
text-align: center;
border-radius: 10px;
padding: 10px 5px;
position: absolute;
z-index: 1;
top: 200%;
left: 50%;
margin-left: -105px;
}

.tt .tt-text::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent Indigo transparent;
}

.tt:hover .tt-text {
visibility: visible;
}
</style>
<h3>말풍선 또는 툴팁</h3>

<div>사용자가 커서로 항목을 가리키면 <p class="tt">말풍선 <span class="tt-text">또는 툴팁(tooltip)</span></p>이 나타납니다.
</div>

---

[광고] Udemy 동영상 강의로 보기