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


Posted in Javascript onNovember 19, 2010


1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦。
2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件。
3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同。
4.该插件依然是练习之作,一人之力,错误难免。

实例演示
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

Javascript 相关文章推荐
JavaScript去掉数组中的重复元素
Jan 13 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
Node.js Buffer用法解读
May 18 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 #Javascript
JQuery 选择和过滤方法代码总结
Nov 19 #Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 #Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 #Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 #Javascript
Google AJAX 搜索 API实现代码
Nov 17 #Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 #Javascript
You might like
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
【消息提示组件】,兼容IE6/7&&FF2
2007/09/04 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
Python递归遍历列表及输出的实现方法
2015/05/19 Python
浅谈Python的异常处理
2016/06/19 Python
Django Highcharts制作图表
2016/08/27 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
transform python环境快速配置方法
2018/09/27 Python
Python笔记之工厂模式
2019/11/20 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
开学典礼观后感
2015/06/15 职场文书
神秘岛读书笔记
2015/07/01 职场文书
2016新年致辞
2015/08/01 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers