<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 등에서 확인 하였습니다.
.
index.html'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 |