CSS 입문 | CSS 고급 | 툴팁(tooltip) 효과

툴팁(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로 설정하여 구현할 수 있다.

transparent 속성값은 투명함을 의미한다.

최종 수정 : 2021-08-27