css3를 이용한 툴팁 표시
<html>
<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 등에서 확인 하였습니다.
난 너무 최신버전만 좋아해 ㅜ.ㅜ
댓글 1개
전 css를 활용하는 팁(tip) 이라고 생각하고...한참을 봤습니다.
뭐가 팁이지? 여러군데 사용하기 위해서...잘쓰는 css를 한곳에 정리해 두고 사용하면 편하다는 것인가? ㅋㅋㅋㅋ
그러다가 실행해보고.. 툴팁(tooltip)이란 용어를 알게 되었네요. 마우스 올렸을때 설명나오는 것이네요. ㅋㅋ
제가 css를 이용한 꿀팁으로 봤나봐요.^^
잘쓰겠습니다. 외국에서 발견한것이니 퍼가도 되겠죠?