CSS 링크 툴팁(tooltip)

CSS를 이용한 툴팁

툴팁은 tittle같이 마우스를 올릴때 나타나는 텍스트상자이다 간단한 예부터 보자

툴팁

위그림과 같이 박스가 나타나는것을 볼 수있다. 그럼 CSS로만 꾸며 보자

CSS 툴팁
이게바로툴팁입니다.

a.box{ position:relative;}
a.box span{ display:none;/*일단 안보이도록*/}
a.box:hover span{ display:block; /*마우스를 올리면 보이도록*/
position:absolute; top:1em; left:2em;/*위치지정*/
/* 박스 꾸며주기*/
border:1px #f99 solid;
background:#CCC;}

위와 같이 나타나게된다 1.안보이도록한다 2. 마우스를 올리면보이도록 3. 그리고 위치 4. 나타나는 박스꾸미기(이건 나름대로 알아서 응용)

 

IE5.x에서는 적용되지않는데 해결방법은 a.box:hover{font-size:100%;}인데 요즘 IE5쓰는사람은 거의 없으니 무시해도 좋을듯하다.