制作半透明的tooltip 无非就是2个div重叠实现的,下面的例子如下:
<html>
<head>
<meta charset="UTF-8" />
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="tooltip.css" type="text/css" media="screen">
<script type="text/javascript" src="../../lib/jquery/jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(function(){
var hideDelay = 500;
var currentID;
var hideTimer = null;
var container = $('<div class="chart-panel">' +
'<div class="chart-spanBG"></div>' +
'<div class="chart-span">' +
'<div class="container"></div>' +
'</div>' +
'</div>');
$('body').append(container);
$('.popupTrigger').live('mouseover', function(){
if (hideTimer)
clearTimeout(hideTimer);
var pos = $(this).offset();
var width = $(this).width();
container.css({
left: (pos.left + width) + 'px',
top: pos.top - 5 + 'px'
});
$('.container').html("<H5>WWWWWWWWWWWWWWWWWWWW</H5>");
container.css('display', 'block');
});
$('.popupTrigger').live('mouseout', function(){
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function(){
container.css('display', 'none');
}, hideDelay);
});
// Allow mouse over of details without hiding details
$('#container').mouseover(function(){
if (hideTimer)
clearTimeout(hideTimer);
});
// Hide after mouseout
$('#container').mouseout(function(){
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function(){
container.css('display', 'none');
}, hideDelay);
});
});
</script>
</head>
<body bgcolor="pink">
<a class="popupTrigger">House, Devon</a>
</body>
</html>
css的内容如下:
.chart-panel { Z-INDEX: 99999; LEFT: 0%; MARGIN-LEFT: 0px; ZOOM: 1; POSITION: absolute; TOP: 20%; Display: none } .chart-spanBG { background-color: #FFFFCC; POSITION: absolute; FILTER: alpha(opacity:50); opacity: 0.50; width: 100%; height: 100% } .chart-span { width: auto; height: auto; margin: auto; POSITION: relative } .chart-panel .container { Z-INDEX: 2; BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; MARGIN: 0px; OVERFLOW: hidden; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 1px solid; POSITION: relative } .chart-panel H5 { FONT-WEIGHT: normal; font-size: 10px; margin-left: 5px; margin-right: 5px; white-space: nowrap; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000 }