tooltips弹出框制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.time.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('span').show();
}).mouseout(function(){
$(this).children('span').hide();
})
}
$("#time").countDown(10);
});
</script>
<style type="text/css">
.tooltip {
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span {
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover {
border: 0; /* IE6 fix */
}
.tooltip:hover span {
visibility: visible;
}
.tooltip span:before,
.tooltip span:after {
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before {
border-top-color: #ccc;
bottom: -8px;
}
/**/
.all {
margin: 10px;
width:0px;
height:0px;
border-top: 8px solid #1c7ecf;
border-right: 8px solid #1c7ecf;
border-bottom: 8px solid #1c7ecf;
border-left: 8px solid #1c7ecf;
}
.left {
margin: 10px;
width:0px;
height:0px;
border-top: 8px solid transparent;
border-right: 8px solid #1c7ecf;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
}
.right {
margin: 10px;
width:0px;
height:0px;
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #1c7ecf;
}
.top {
margin: 10px;
width:0px;
height:0px;
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #1c7ecf;
border-left: 8px solid transparent;
}
.bottom {
margin: 10px;
width:0px;
height:0px;
border-top: 8px solid #1c7ecf;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
}
</style>
</head>
<body>
<div class="all">all</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div id="time"></div>
<br />
<br />
<br />
<a href="#" class="tooltip">
your text
<span>Your custom description</span>
</a>
</body>
</html>
解析如下图：
