css3를 이용한 툴팁 표시 > 그누보드5 팁자료실

그누보드5 팁자료실

css3를 이용한 툴팁 표시 정보

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 등에서 확인 하였습니다.
난 너무 최신버전만 좋아해 ㅜ.ㅜ

추천
3

댓글 1개

소스를 html로 저장후 실행해보고 이해 했습니다. ㅋㅋ(저의 무식함이 잠시 혼자 웃었습니다. ^^)
전 css를 활용하는 팁(tip) 이라고 생각하고...한참을 봤습니다.
뭐가 팁이지? 여러군데 사용하기 위해서...잘쓰는 css를 한곳에 정리해 두고 사용하면 편하다는 것인가?  ㅋㅋㅋㅋ
그러다가 실행해보고.. 툴팁(tooltip)이란 용어를 알게 되었네요. 마우스 올렸을때 설명나오는 것이네요. ㅋㅋ

제가 css를 이용한 꿀팁으로 봤나봐요.^^
잘쓰겠습니다. 외국에서 발견한것이니 퍼가도 되겠죠?
전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT