jquery.cvtooltip.js 基于jquery的气泡提示插件

插件概述与兼容性说明

插件名称cvtooltip中，cv代表ChinaValue的首字母缩写，而tooltip意为提示。

该插件适用于新功能引导、用户操作指引、即时消息展示以及操作失败提示等多种场景（即使操作成功也可使用）。它完全基于CSS实现，不依赖任何图片文件。

目前发现的主要问题是在Chrome浏览器中表现不佳，原因是Chrome对页面的解析机制与IE和Firefox不同，导致jQuery的position或offset方法返回的值存在差异。

该插件仍属于个人练习作品，由单人开发，难免存在错误。

实例演示

示例1：在页面加载的同时显示气泡提示，请观察页面第一段内容。

示例2：点击按钮后显示气泡提示。请注意，此提示不可手动关闭，将在两秒后自动消失。此处包含一个链接文本。

示例3：关闭气泡时触发关闭函数。点击此处再次演示。

核心参数详解

panel: "body"，// 该参数指定加载气泡提示的容器，值不同可能导致计算出的位置不同。

selector: ""，// 用于计算定位的目标控件选择器。

direction: 0，// 设置箭头的指向方向。

width: 300，// 气泡提示的宽度，需完全手动设置。

left: 0，// 距离panel参数指定容器的左边距。

top: 0，// 距离panel参数指定容器的上边距。

delay: -1，// 延迟关闭的时间，单位为毫秒。值为0时表示立即关闭。

speed: 300，// 关闭时的动画效果，即淡出速度。

close: true，// 是否显示关闭按钮。

callback: function() {

$.noop(); // 点击关闭按钮后触发的事件处理函数。

源码获取与定位优化

此处省略具体代码，您可以查看页面源文件，JS部分已写得非常清晰，或者直接点击链接下载源码。

显示气泡提示的前提是存在一个被提示的对象。默认情况下，位置计算基于body元素，这可能导致页面内容发生变化而气泡位置未随之更新，从而使得提示失效。

为解决上述问题，提供了selector参数，以确保气泡能跟随所选控件的位置变化而动态调整。

提供JS文件的打包下载链接。

原文地址：http://www.cnblogs.com/0417/archive/2010/11/17/1880293.html