<head>
<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> <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>
<div class="tooltips">
jQuery Tooltip Demo <pre>(mouse over container)</pre><span class="tooltip-style1"><img src="tooltip/web-1.jpg"></span>
</div>
а как в нём <div> сменить на что нибудь другое? на <tr> например?
как я только меняю, перестаёт работать всплывающее окно
