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 相关文章推荐
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
BootStrap 导航条实例代码
May 18 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
vue组件生命周期详解
Nov 07 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 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
域名和cookie问题(域名后缀)
2012/10/10 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
0基础学习前端开发的一些建议
2020/07/14 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python计算列表内各元素的个数实例
2018/06/29 Python
python 内置模块详解
2019/01/01 Python
python分数表示方式和写法
2019/06/26 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python如何执行系统命令
2020/09/23 Python
python获取linux系统信息的三种方法
2020/10/14 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
财务主管岗位职责
2014/02/28 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL