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学习笔记之Helloworld
Dec 22 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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
php写的简易聊天室代码
2011/06/04 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
newxtree.js代码
2007/03/13 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python实现随机漫步算法
2018/08/27 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
会计专业自荐信范文
2015/03/05 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript
Java界面编程实现界面跳转
2022/06/16 Java/Android