Computer/CSS

[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시

알찬돌삐 2012. 1. 19. 22:22
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<style> 
/* --- base --- */ 
a.tooltip { position: relative; text-decoration: underline;
a.tooltip:hover { color: #999999; text-decoration: none !important; } 

a.tooltip:hover:after, a.tooltip:hover:before { display: block; } 

/* --- tooltip container --- */ 
a.tooltip:before { 
content: attr(rel); 
display: block; 
width: 140px; 
    position: absolute; 
z-index: 1000; 
    bottom: 150%; 
    left: -10px; 
    padding: 5px 10px 8px 10px; 
text-align: left; 
    color: #ffffff; 
    display: none; 
/* background */ 
background: #404040; /* CSS2 */ 
background: -moz-linear-gradient(top, #4e4e4e 0%, #404040 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e4e4e), color-stop(100%,#404040)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* IE10+ */ 
background: linear-gradient(top, #4e4e4e 0%,#404040 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#404040',GradientType=0 ); /* IE6-9 */ 
/* border-radius */ 
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px; 
/* box-shadow */ 
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
/* text-shadow */ 
text-shadow: 0px 1px 0px #292929; 

/* --- tooltip arrow --- */ 
a.tooltip:after { 
content: ""; 
display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
z-index: 1000; 
bottom: 18px; 
left: -2px; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
border-top: 6px solid #404040; 
    display: none; 
background: transparent;
</style> 
</head> 
<body> 
<br><br><br><br> 
<span><a href="#" class="tooltip" rel="이런 저런 내용이나 설명">링크나 제목</a></span> 
</body> 
</html> 



외국사이트 돌아다니다 이런식으로 가능한줄 처음 알았네요 ㅜ.ㅜ 
맨날 Javascript나 레이어 처리만 했었는데 -0- 
여러곳에 사용할때 편할것 같습니다. 

IE9, Chrome16 , FF9 등에서 확인 하였습니다. 
난 너무 최신버전만 좋아해 ㅜ.ㅜ

 
.

'Computer > CSS' 카테고리의 다른 글

CSS Hack  (0) 2012.08.10
디자인 템플릿  (0) 2012.08.10
와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007.10.26
이미지 툴바 감추기  (2) 2005.06.25
이메일 네임택 만들어주는 사이트  (1) 2005.05.15