..

Search

36) 툴팁

툴팁


툴팁(tooltip) 효과

해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과를 툴팁(tooltip) 효과라고 합니다.

CSS를 이용하면 이러한 툴팁 효과를 간단히 설정할 수 있습니다.

 

다음 예제는 visiblility 속성을 이용하여 툴팁 효과를 구현하는 예제입니다.

예제

<style>

    .tooltipposition: relativedisplay: 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>

    .tooltipmargin: auto; }

    .tooltip .tooltip-contenttop: -15pxright: 105%; }

</style>

코딩연습 ▶

 

다음 예제는 해당 요소에 마우스를 올리면 툴팁이 위쪽에 나타나도록 구현한 예제입니다.

예제

<style>

    .tooltipmargin: auto; }

    .tooltip .tooltip-contentbottom: 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 속성값은 투명함을 의미합니다.

연습문제