相信很多用过或者见过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实例展示了如何利用JavaScript和CSS创建自定义的Tooltip效果。通过监听元素的鼠标悬停事件，动态创建并定位Tooltip元素，实现了更灵活和可定制的用户体验。这只是一个基础示例，实际应用中可以...
参照《jQuery完全攻略》亲自手打并测试的100多个实例（部分实例来自网络如消息框、tooltip、面包屑式菜单、层级菜单以及一些jQuery插件的用法）。 主要分为： jQuery操作DOM节点、数组和字符串 jQuery表单验证 ...
《jQuery插件开发详解》 在Web开发领域，jQuery是一个广泛应用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。jQuery插件是jQuery生态系统的重要组成部分，它们扩展了jQuery的核心...
**jQuery FormValidation表单验证插件** jQuery FormValidation是一款高效且灵活的JavaScript库，专为开发者提供表单验证功能。这个插件使我们能够轻松地为网页中的表单添加验证规则，确保用户输入的数据符合预设的...
这是使用jQuery Tooltip Plugin弹出各种浮动提示效果插件的一些例子，用这个插件可以显示自定义的鼠标悬停提示，比如文字提示框、图片框，在鼠标放在特定位置时激活，鼠标移开后消失，如示例所示为弹出一个图片浮动...
而“30个jQuery插件-Tooltip气泡悬浮框的.doc”则详细列出了各种Tooltip插件的实例，可以帮助开发者了解并选择最适合他们项目的解决方案。 在实际开发中，了解并掌握这些jQuery插件的使用，能够大大提升开发效率，...
- **绘制图表**：使用jQuery选择器找到容器，然后调用$.plot()方法，传入数据和配置选项来创建图表。 4. **实例源码分析** 压缩包中的"flot"文件可能包含示例代码、样式文件和数据文件，这些示例展示了如何使用...
jQuery Tooltip弹出式分享按钮插件是一个用于网页交互增强的工具，主要利用jQuery库实现。jQuery，一个轻量级的JavaScript库，因其简洁的API和强大的功能，深受开发者喜爱。这个插件主要用于创建动态提示信息，当...
在不同的JavaScript库中，$符号常常被用来表示各自的库实例，为了避免$符号的冲突，可以将jQuery包裹在一个自执行的匿名函数中，并通过jQuery参数映射$符号，这样在插件内部可以放心使用$符号而不用担心冲突问题。...
4. **易用性**: 使用Toolbar.js非常简单，只需引入jQuery和Toolbar.js的JavaScript及CSS文件，然后通过简单的配置代码就能创建出符合需求的工具栏。 5. **自定义选项**: Toolbar.js允许开发者自定义工具栏的位置、...
**jQuery PoshyTip实例应用详解** 在Web开发中，用户交互体验是至关重要的，而提示信息作为用户与网站沟通的桥梁，能有效提高用户体验。jQuery PoshyTip是一款优秀的jQuery插件，专门用于创建美观且可自定义的提示...
29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....
12. **Build a Better Tooltip with jQuery Awesomeness**：这个教程教你如何用jQuery编写一个插件，创建出比浏览器默认提示更吸引人的提示框。 13. **Simple Tooltip – jQuery & CSS**：Soh Tanaka的教程教你如何...
10. `jQuery经典插件大全-实例-教程-参数详解.url`：这是一个链接，可能指向一个资源，提供了更多关于jQuery插件的信息，包括如何使用、实例教程和参数解释。 综合以上分析，我们可以学习到如何利用jQuery和CSS3来...
jQuery Tooltip是一种常见的网页交互元素，它为用户提供了一种在鼠标悬停时显示额外信息的方式，通常用于增强用户体验。这个“jQuery Tooltip气泡提示工具栏代码.zip”文件包含了一个实现这一功能的jQuery代码示例，...
在本文中，我们将深入探讨jQuery插件的原理、用途以及一些常见的插件实例。 首先，jQuery插件是jQuery库的扩展，它们提供了额外的功能和便捷的接口，帮助开发者更高效地实现页面交互、动画效果、数据处理等功能。...
10. **版本兼容性**：jQuery的版本迭代通常会保持向后兼容，但新的版本可能会弃用旧的API，学习不同版本的jQuery实例源码有助于理解其演进过程和最佳实践。 通过分析《锋利的jQuery》实例源码，你可以深入理解...
在jQuery中，可以使用`title`属性或者自定义的插件如`tooltipster`来创建Tooltip。在这个实例中，可能是通过监听`mouseover`和`mouseout`事件，动态改变元素的`title`属性，或者创建自定义的CSS类来实现视觉效果。 ...
2. CSS布局：使用CSS3的position属性（如absolute或fixed）可以实现元素的浮动效果。通过调整top、bottom、left和right属性值，可以将提示层定位到期望的方向。 3. jQuery事件处理：利用jQuery的事件监听器，如...