툴팁 디자인 커스터마이징을 위한 예제를 6개 제공하겠습니다. 각 예제는 주석과 함께 설명되며, HTML과 CSS 코드로 구성되어 있습니다.
예제 1: 기본 툴팁 스타일
<!DOCTYPE html>
<html>
<head>
<style>
/* 기본 툴팁 스타일 */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.2s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip">마우스를 올려보세요
<span class="tooltiptext">이것은 기본 툴팁입니다.</span>
</div>
</body>
</html>
예제 2: 툴팁 스타일 변경 (색상 및 폰트)
<!DOCTYPE html>
<html>
<head>
<style>
/* 툴팁 스타일 변경 (색상 및 폰트) */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #ff5733;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.2s;
font-family: Arial, sans-serif;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip">마우스를 올려보세요
<span class="tooltiptext">색상과 폰트를 변경한 툴팁입니다.</span>
</div>
</body>
</html>
예제 3: 원형 툴팁 스타일
<!DOCTYPE html>
<html>
<head>
<style>
/* 원형 툴팁 스타일 */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 80px;
background-color: #009688;
color: #fff;
text-align: center;
border-radius: 50%;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -40px;
opacity: 0;
transition: opacity 0.2s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip">마우스를 올려보세요
<span class="tooltiptext">원형 툴팁 스타일입니다.</span>
</div>
</body>
</html>
예제 4: 그림자 효과를 추가한 툴팁
<!DOCTYPE html>
<html>
<head>
<style>
/* 그림자 효과를 추가한 툴팁 */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
transform: translateY(10px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="tooltip">마우스를 올려보세요
<span class="tooltiptext">그림자 효과를 추가한 툴팁입니다.</span>
</div>
</body>
</html>
예제 5: 툴팁 위치 변경 (오른쪽으로)
<!DOCTYPE html>
<html>
<head>
<style>
/* 툴팁 위치 변경 (오른쪽으로) */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
top: 50%;
left: 125%;
margin-top: -20px;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
transform: translateX(10px);
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
transform: translateX(0);
}
</style>
</head>
<body>
<div class="tooltip">마우스를 올려보세요
<span class="tooltiptext">오른쪽으로 이동한 툴팁입니다.</span>
</div>
</body>
</html>
예제 6: 툴팁 크기 조절
<!DOCTYPE html>
<html>
<head>
<style>
/* 툴팁 크기 조절 */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px; /* 크기 조절 */
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -100px; /* 가운데 정렬을 위한 마진 조절 */
opacity: 0;
transition: opacity 0.2s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip">마우스를 올려보세요
<span class="tooltiptext">크기가 조절된 툴팁입니다.</span>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 페이드 인/아웃: 요소의 페이드 인/아웃 효과. (1) | 2023.12.23 |
|---|---|
| 화면 가운데 정렬: 요소를 화면 가운데 정렬. (0) | 2023.12.23 |
| 텍스트 회전: 텍스트 회전 효과 적용. (0) | 2023.12.23 |
| 미디어 쿼리: 미디어 쿼리를 사용한 반응형 디자인. (0) | 2023.12.23 |
| 그라데이션 배경: 그라데이션 배경 적용. (0) | 2023.12.23 |