<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<style>
#tooltip {
position: absolute;
border: 1px solid #333;
background: #f7f5d1;
padding: 1px;
color: #333;
display: none;
}
</style>
<body>
<p><a href="#" class="tooltip"title="超链接提示1">提示1.</a> </p>
<p><a href="#" class="tooltip"title="超链接提示2">提示2.</a> </p>
</body>
<script>
$(function () {
var x=10;
var y=20;
$("a.tooltip").mouseover(function (e) {
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.myTitle+"<\/div>";
$("body").append(tooltip);
$("tooltip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseout(function () {
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
})
</script>
</html>
$("tooltip").css({
====>选择器错了，少了#
$("#tooltip").css({
http://www.jb51.net/article/67616.htm
$("tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
改成
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");