[CSS] 툴팁(tooltip) 만들기

 

 

 

 

간단하게 툴팁을 만드는 방법입니다.

 

툴팁 텍스트해당 글자에 마우스를 올리면 나타나는 보충 설명를 볼 수 있습니다.

 

 

 

1. HTML

 

<span class="text">툴팁 텍스트<span class="tooltip">해당 글자에 마우스를 올리면 나타나는 보충 설명</span></span>를 볼 수 있습니다.

 

 

 

2. CSS

 

.text { position: relative; border-bottom: 1px dotted #0026dd; color: #0026dd; cursor: default; }
.tooltip { visibility: hidden; min-width: 150px; padding: 8px; background: #000; border-radius: 6px; font-size: 13px; color: #fff; position: absolute; top: 26px; left: 50%; z-index: 1; }
.text:hover .tooltip { visibility: visible; }