웹사이트를 이용하다보면 특정 단어에 링크 처럼 밑줄이 가있고 거기 마우스를 올리면 그 단어에 대한 설명이 나오는것들이 있다.
이 것을 툴팁이라고 부르고 있으며 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는 수정한다.
참고
W3C - CSS Tooltip
공부 목적 블로그