글 수 40
<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>