相信很多用过或者见过jQuery的tooltip的插件，因为它真的实用。这个例子只是学习并练手的程序，我们模拟tooltip搞一个类似的。
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文件和源文件.
分享到：
顶一个
相关推荐
jQuery实例_ ToolTip的实现
参照《jQuery完全攻略》亲自手打并测试的100多个实例（部分实例来自网络如消息框、tooltip、面包屑式菜单、层级菜单以及一些jQuery插件的用法）。 主要分为： jQuery操作DOM节点、数组和字符串 jQuery表单验证 ...
这是使用jQuery Tooltip Plugin弹出各种浮动提示效果插件的一些例子，用这个插件可以显示自定义的鼠标悬停提示，比如文字提示框、图片框，在鼠标放在特定位置时激活，鼠标移开后消失，如示例所示为弹出一个图片浮动...
29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....
插件描述：ets tooltip截图显示用法实例在图表节点显示对应的截图. 参考示例：http://www.jq22.com/jquery-info4830
之前我们分享过一些比较实用的jQuery/CSS3 Tooltip弹出框，大部分都是鼠标滑过链接文字或者按钮时弹出一个提示层，比如这款jQuery Tooltip气泡提示框插件就拥有多种风格让你选择。这次我们要带来另外一款Tooltip用户...
一款以jquery为核心实现的扁平化风格插件，在这款插件中，包括了按钮、滑块、菜单、Tooltip提示框等众多效果，用户可根据需要，只选择其中的一款来使用，除了上述组件效果，还可以实现列表、排行榜、图标、焦点图、...
jQuery tooltip鼠标提示层，jQuery CSS实现，鼠标移到链接文字上会弹出一个图片 文字的层提示框，鼠标移走后提示自动消失，特效代码来自国外的前端设计网站。这个链接提示层支持在弹出层中显示图片、文字和链接格式...
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
通过不同css样式切换皮肤，通过cookie(jquery.cookie.js)保存样式。 2）收放左侧导航栏。 3）滚动信息。 4）自定义tooltip。 5）分目录的收放 6）广告图片滚动（上下单个） 7）产品浏览（左右多个） 8）...
tooltip.js是一款HTML5 tooltips工具提示jquery插件。tooltip.js可以通过js或html5 data属性来实例化一个tooltip。
主要介绍了jQuery实现ToolTip元素定位显示功能,结合实例形式分析了jQuery针对页面元素属性的动态操作相关技巧,需要的朋友可以参考下
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
”center”> <fieldset xss=removed> ”0″ cellpadding=”3″ cellspacing=”3″> <tr> <td> 请选择汽车类型： </td> </tr> <tr> <td> ”dllCar” runat=”server” ToolTip=”至少选择一种车！” CssClass=”...
适用于新功能的提示，引导用户的提示，即时类消息的提示，操作失败提示（操作成功了也没人拦着）等等等，使用css实现，不附带任何图片文件。 3.目前发现的问题，在Chorme中表现的不给力，是由于Chrome对页面的解析与...
本文实例讲述了jquery提示效果的用法。分享给大家供大家参考。具体实现方法如下： 代码如下:<p><a>提示1.</a></p> <p><a>提示2.</a></p> <p><a>自带提示1.</a></p> <p><a>自带提示2.</a></p> $(function(){ $(“....
本文实例讲述了jQuery实现的超链接提示效果。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title></title>...
本组件依赖JQuery 本人测试的JQuery 是1.8， 兼容IE8,IE9，谷歌，火狐等。 //验证输入框 function ValidateCompent(input){ var _input = $(input).clone(true); _input.css("height",$(input).css("height")); ...