툴팁
툴팁(tooltip) 효과
해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과를 툴팁(tooltip) 효과라고 합니다.
CSS를 이용하면 이러한 툴팁 효과를 간단히 설정할 수 있습니다.
다음 예제는 visiblility 속성을 이용하여 툴팁 효과를 구현하는 예제입니다.
예제
<style>
.tooltip { position: relative; display: inline-block; }
.tooltip .tooltip-content {
visibility: hidden;
width: 300px;
background-color: orange;
padding: 0;
margin-top: 10px;
color: white;
text-align: center;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltip-content { visibility: visible; }
</style>
CSS를 이용하면 툴팁(tooltip)이 나타나는 위치도 간단히 설정할 수 있습니다.
CSS의 상대적 위치를 나타내는 top, right, bottom, left 속성을 이용하여 툴팁의 상대 위치를 설정할 수 있습니다.
다음 예제는 툴팁이 해당 요소의 아래 쪽이 아닌 왼쪽에 나타나도록 구현한 예제입니다.
예제
<style>
.tooltip { margin: auto; }
.tooltip .tooltip-content { top: -15px; right: 105%; }
</style>
다음 예제는 해당 요소에 마우스를 올리면 툴팁이 위쪽에 나타나도록 구현한 예제입니다.
예제
<style>
.tooltip { margin: auto; }
.tooltip .tooltip-content { bottom: 100%; left: 50%; margin-left: -150px; }
</style>
또한, 다음 예제처럼 툴팁(tooltip)의 모양을 말풍선 모양처럼 설정할 수도 있습니다.
예제
<style>
.tooltip .tooltip-content::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: orange transparent transparent transparent;
}
</style>
위의 예제에서 툴팁의 말풍선 모양은 border-color 속성값을 transparent로 설정하여 구현할 수 있습니다.
