|
Помогите настроить всплывающую подсказку
Подсказка всплывает справа от мыши, а надо также сделать и слева от мыши.Заранее спасибо: вот код.
<!-- set document type -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Всплывающие подсказки</title>
<style>
span {
display:none;
position:absolute;
z-index:1000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.tooltip-style1 {
background:#5a85a5 url(onebit_47.png) 10px center no-repeat;
color:white;
min-height:auto;
opacity:0.9;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
}
.tooltip-style2 {
background:#363636;
padding:3px;
color:white;
text-align:center;
}
.tooltip-style3 {
background:#e8e8e8;
color:black;
padding:15px;
}
pre {
font-size:10px;
}
</style>
<!-- load jQuery from Google AJAX Libraries API -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".tooltips").hover(
function() { $(this).contents("span:last-child").css({ display: "block" }); },
function() { $(this).contents("span:last-child").css({ display: "none" }); }
);
$(".tooltips").mousemove(function(e) {
var mousex = e.pageX + 15;
var mousey = e.pageY + 5;
$(this).contents("span:last-child").css({ top: mousey, left: mousex });
});
});
</script>
</head>
<body>
<div class="container_16">
<div id="header_container" class="grid_16">
<div id="header_wrapper" class="tooltips">
jQuery Tooltip Demo <pre>(mouse over container)</pre><span class="tooltip-style1"><img src="tooltip/web-1.jpg"></span>
</div>
</div>
<div id="nav_container" class="grid_3">
<div id="nav_wrapper" class="tooltips">
Sample Navigation <pre>(mouse over container)</pre><span class="tooltip-style3">This is a normal tooltip</span>
</div>
</div>
<div id="footer_container" class="grid_16">
</div>
</div>
</body>
</html>
|