相信很多用过或者见过jQuery的tooltip的插件，因为它真的实用。这个例子只是学习并练手的程序，我们模拟tooltip搞一个类似的。
1，我们需要引入jQuery。
2，我们这个程序是直接把tip里的数据载入，没有再请求其他资源之类的，要弄成请求的也很简单，自己写个jQuery的ajax请求就可以了。
3，我们设计参考tooltip，我们希望当鼠标经过某个元素的时候，触发tip，而这个tip的内容就是那个元素接下来的那个元素（我们可以用一个div吧所有内容包括进去）。
4，基本的内容就是上面所说，HTML代码如下：
虽然jQuery插件使用起来也非常的简单，但是自己写的就是会让人很有成就感，上面我在ie测试没有通过。。。oye~火狐，chrome正常。
附件中是压缩后的jQuery文件和源文件.
1，我们需要引入jQuery。
2，我们这个程序是直接把tip里的数据载入，没有再请求其他资源之类的，要弄成请求的也很简单，自己写个jQuery的ajax请求就可以了。
3，我们设计参考tooltip，我们希望当鼠标经过某个元素的时候，触发tip，而这个tip的内容就是那个元素接下来的那个元素（我们可以用一个div吧所有内容包括进去）。
4，基本的内容就是上面所说，HTML代码如下：
<!-- html的验证规范之类的这里就忽略，自己补充。 -->
<html>
<head>
<script src="./jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<a href="#" class="tip" >第一个</a>
<div style="display:none;border:1px">
<!-- tip中的代码 -->
<span style="background-color:#cdcdcd">这是第一个a标签的tip</span>
</div>
<a href="#" class="tip" >第二个</a>
<div style="display:none;border:1px">
<!-- tip中的代码 -->
<span style="background-color:#cdcdcd">这是第二个a标签的tip</span>
</div>
<a href="#" class="tip" >第三个</a>
<div style="display:none;border:1px">
<!-- tip中的代码 -->
<span style="background-color:#cdcdcd">这是第三个a标签的tip</span>
</div>
<a href="#" class="tip" >第四个</a>
<div style="display:none;border:1px">
<!-- tip中的代码 -->
<span style="background-color:#cdcdcd">这是第四个a标签的tip</span>
</div>
<script type="text/javascript" >
var xpos, ypos;
$(document).mousemove(function(e){
//获取鼠标的位置，绝对值，像素值。
xpos = e.pageX;
ypos = e.pageY;
});
$(document).ready(function(){
//对css类为tip的绑定一个mouseover的事件
$(".tip").live("mouseover",function(){
//获取浏览窗口右边和底部滚动条的垂直和水平位置，无滚动条则不受影响，像素值.
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
//获取鼠标覆盖的元素的下一个元素
var next = $(this).next();
//给下一个元素添加一些样式来设置显示的位置，并让其显示。
next.css("position","fixed");
next.css("left", xpos-scrollLeft);//记得扣除滚动条的位置。
next.css("top", ypos-scrollTop);
next.show();
});
$(".tip").live("mouseout",function(){
//鼠标移走的时候隐藏tip
$(this).next().hide();
});
});
</script>
</body>
</html>
虽然jQuery插件使用起来也非常的简单，但是自己写的就是会让人很有成就感，上面我在ie测试没有通过。。。oye~火狐，chrome正常。
附件中是压缩后的jQuery文件和源文件.
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
