툴팁은 title 태그를 사용한 엘리먼트에 마우스를 올리면 웹 브라우저가 표시하는 노란색 작은 텍스트 상자입니다.

자바스크립트와 CSS를 이용해서 멋진 스타일의 툴팁을 직접 만드는 사례가 있었습니다만, CSS 포지셔닝을 이용하면 순수하게 CSS만으로도 툴팁을 만들 수 있습니다.

먼저 의미를 살리면서 구조화된 마크업을 만듭니다.

이제 앵커 위로 마우스가 올라오면 span의 내용이 나타나게 해야 합니다.

먼저 span의 diaplay속성값을 block으로 지정하는데, 마우스가 올라오는 상태에만 지정해야 합니다.

이 상태에서 코드를 실행해 보면, 링크 위로 마우스를 올렸을 때 링크 옆에 span에 지정한 텍스트가 표시되는 게 보일 겁니다.

앵커 오른쪽 하단에 span 텍스트가 표시되도록 하려면 span position 속성을 absolute로 바꾸고 위에서 1em만큼, 왼쪽에서 2em만큼에

해당하는 위치를 지정합니다.

a.tooltip:hover span{
display:block;
position:absolute;
top:1em;
left:2em;
padding:0.2em 0.6em;
border:1px solid #996633;
background-color:#ffff66;
text-decoration:none;
color::#000;
}

좀더 툴팁다운 모양을 만들기 위해 패딩,테두리선, 배경색까지 지정해 봅니다.

<마우스 롤오버시 나타난다>