여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. CSS - Tooltip
CSS – Tooltip
4개월전 작성
4개월전 수정

웹사이트를 이용하다보면 특정 단어에 링크 처럼 밑줄이 가있고 거기 마우스를 올리면 그 단어에 대한 설명이 나오는것들이 있다.

이 것을 툴팁이라고 부르고 있으며 CSS로 Javascript 없이 툴팁을 만들 수 있다.

Tooltip

CSS로 툴팁이 나오게끔 설정할 수 있다.

기본 – 툴팁이 위쪽에 나오게 하기

CSS
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
left: 5px;
border-width: 5px;
border-style: solid;
border-color: rgba(0,0,0,0.5) transparent transparent transparent;
}

.tooltip .tooltiptext {
visibility: hidden;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
width: 120px;
max-width: 200px;

position: absolute;
z-index: 1;
bottom: 120%;
left: 0;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

div.tooltip ~ div {
display: inline-block;
}
HTML
<div class="tooltip">툴팁이 나오게할 내용<span class="tooltiptext">툴팁 내용</span></div><div>설명</div>
기본 예시
툴팁이 나오게할 내용툴팁 내용
설명
사용된 코드 설명
position: relative;
:
포지션을 선택한 요소의 상대 위치로 지정한다.
top: 100%; left: 5px;
:
툴팁 말꼬리가 위쪽에서 100% 아래로, 왼쪽에서 5px만큼 오른쪽으로 이동한다.
border-width: 5px;
:
테두리 두께를 5px로 설정한다.
border-style: solid;
:
테두리를 실선으로 표시한다.
border-color: rgba(0,0,0,0.5) transparent transparent transparent;
:
border-color를 위쪽은 0,0,0 선명도 50%, 오른쪽, 아래쪽 및 왼쪽은 투명으로 표시한다.
visibility: hidden;
:
이 요소를 숨긴다.
background-color: rgba(0,0,0,0.5);
:
배경 색상은 0,0,0 선명도 50%로 설정한다.
position: absolute;
:
포지션을 선택한 요소의 상위 요소 기준으로 절대 경로로 지정한다.
z-index: 1;
:
Z축 기준으로 1단계만큼 위로 올라오게 설정한다.
bottom: 120%; left: 0;
:
아래쪽에서 120% 만큼 위로, 왼쪽에서 0만큼 오른쪽으로 이동한다.
visibility: visible;
:
이 요소를 보이게한다.

툴팁이 오른쪽에 오게하기

CSS
.tooltip .tooltiptext::after {
top: 50%;
right: 100%;
margin-top: -5px;
border-color: transparent rgba(0,0,0,0.5) transparent transparent;
}

.tooltip .tooltiptext {
top: -5px;
left: 110%;
}

위치 지정 코드는 위와 동일하게 변경하고 margin-top, border-color는 수정한다.

툴팁이 왼쪽에 오게하기

CSS
.tooltip .tooltiptext::after {
top: 50%;
left: 100%;
margin-top: -5px;
border-color: transparent transparent transparent rgba(0,0,0,0.5);
}

.tooltip .tooltiptext {
top: -5px;
right: 110%;
}

위치 지정 코드는 위와 동일하게 변경하고 margin-top, border-color는 수정한다.

툴팁이 아래쪽에 오게하기

CSS
.tooltip .tooltiptext::after {
bottom: 100%;
left: 50%;
margin-top: -5px;
border-color: transparent transparent rgba(0,0,0,0.5) transparent;
}

.tooltip .tooltiptext {
top: 120%;
left: 50%;
}

위치 지정 코드는 위와 동일하게 변경하고 margin-top, border-color는 수정한다.

참고
Mingg`s Diary
밍구
공부 목적 블로그