[HTML, CSS] - 툴팁

 

---

 

 

---

 

툴팁(tooltip) 효과

해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과

 

ex) 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의 상대적 위치를 나타내는 top, right, bottom, left 속성을 이용하여 툴팁의 상대 위치를 설정 가능

 ex) 툴팁이 해당 요소의 아래 쪽이 아닌 왼쪽에 나타나도록 구현

<style>
    .tooltip { margin: auto; }
    .tooltip .tooltip-content { top: -15px; right: 105%; }
</style>

 

ex)  툴팁 말풍선 모양

<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>

 

 

---

 

https://www.tcpschool.com/css/css_advanced_tooltip