CSS Tooltips
CSS Tooltips: 사용자에게 추가 정보 제공하기
CSS Tooltips는 사용자가 마우스를 특정 요소에 올렸을 때 추가 정보를 표시하는 작은 텍스트 상자입니다. 주로 링크, 아이콘, 버튼에 대한 설명을 제공하는 데 사용됩니다. 툴팁은 사용자 인터페이스에서 간결하고 직관적으로 정보를 전달하는 역할을 합니다.
1. 기본 툴팁 구현
CSS로 툴팁을 구현하기 위해서는 HTML 요소에 툴팁 내용을 추가하고, CSS로 스타일링하며, 마우스가 요소 위에 올라왔을 때 툴팁이 표시되도록 설정합니다.
HTML 구조
<div class="tooltip">
Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
.tooltip: 툴팁이 표시될 요소를 감싸는 컨테이너..tooltiptext: 툴팁으로 표시될 텍스트.
CSS 스타일
/* 툴팁 컨테이너 */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
/* 툴팁 텍스트 숨김 처리 */
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%; /* 요소의 위쪽에 배치 */
left: 50%;
margin-left: -60px; /* 가운데 정렬 */
opacity: 0;
transition: opacity 0.3s;
}
/* 마우스를 올리면 툴팁 표시 */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
설명
.tooltiptext클래스는 기본적으로visibility: hidden속성을 사용해 툴팁을 숨기고 있습니다.- 마우스를
.tooltip요소 위에 올리면 **.tooltiptext*가visibility: visible로 바뀌고, **투명도(opacity)**가 1로 바뀌어 서서히 나타나는 효과가 적용됩니다. - 툴팁 위치는 기본적으로
bottom: 125%로 설정해 요소 위에 배치됩니다.
2. 툴팁 위치 조정
툴팁은 다양한 위치에 나타날 수 있습니다. 툴팁의 위치를 위, 아래, 왼쪽, 오른쪽으로 변경할 수 있습니다.
예시: 툴팁을 요소 아래에 표시
.tooltiptext {
bottom: -50px; /* 요소 아래에 툴팁 표시 */
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
이 코드는 툴팁을 요소의 아래쪽에 표시하며, **bottom: -50px**을 사용하여 툴팁이 아래로 나타나도록 조정합니다.
예시: 툴팁을 요소 오른쪽에 표시
.tooltiptext {
top: -5px;
left: 105%; /* 요소 오른쪽에 툴팁 표시 */
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
이 코드는 툴팁을 요소의 오른쪽에 표시하도록 설정합니다.
3. 툴팁의 화살표 추가
툴팁에 화살표를 추가하면 사용자에게 툴팁의 출처가 어디인지 더 명확히 알려줄 수 있습니다. CSS의 ::after 또는
::before 의사 클래스를 사용해 화살표를 만들 수 있습니다.
화살표 추가 예시
.tooltip .tooltiptext::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
::after: 툴팁의 아래에 삼각형 모양의 화살표를 추가합니다.border-color: 위쪽은 검정색, 나머지 세 방향은 투명하게 설정하여 화살표를 만듭니다.
4. 툴팁 애니메이션 효과 추가
툴팁이 서서히 나타나고 사라지는 애니메이션을 추가하면 사용자 경험을 더욱 향상시킬 수 있습니다. transition 속성을 사용해 툴팁이 등장하고 사라질 때
부드러운 효과를 적용합니다.
예시: 서서히 나타나는 툴팁
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
이 코드는 툴팁이 0.5초 동안 서서히 나타나고 사라지도록 설정합니다. transition 속성을 활용해 툴팁의 **투명도(opacity)**가 천천히
변화합니다.
5. 다양한 스타일의 툴팁
툴팁의 디자인은 창의적으로 변경할 수 있습니다. 예를 들어 둥근 모서리, 배경 색상, 텍스트 스타일을 변경하여 툴팁을 더욱 눈에 띄게 만들 수 있습니다.
예시: 스타일링된 툴팁
.tooltiptext {
visibility: hidden;
width: 150px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 8px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s ease;
}
.tooltiptext::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
이 코드는 툴팁에 둥근 모서리, 배경 색상 및 화살표를 추가하여 시각적으로 더 세련된 스타일을 제공합니다.
6. 실전 예시: 아이콘에 툴팁 적용
툴팁은 아이콘, 이미지, 링크 등에 유용하게 적용될 수 있습니다. 다음 예시는 아이콘 위에 마우스를 올렸을 때 툴팁을 표시하는 예시입니다.
예시: 아이콘에 툴팁 적용
<div class="tooltip">
<img src="info-icon.png" alt="info" width="32" height="32">
<span class="tooltiptext">Additional information about this icon</span>
</div>
.tooltip {
position: relative;
display: inline-block;
}
.tooltiptext {
visibility: hidden;
width: 160px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
position: absolute;
bottom: 125%;
left: 50%;
margin-left: -80px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
이 코드는 아이콘에 마우스를 올렸을 때 추가 정보가 포함된 툴팁이 표시됩니다. 아이콘 옆에 마우스를 대면 자연스럽게 팝업 형태의 툴팁이 나타납니다.