jquery的Tooltip插件 qtip使用详细说明


Posted in Javascript onSeptember 08, 2010

例如:
Internet Explorer 6.0+
Firefox 2.0+
Opera 9.0+
Safari 3.0+
Google Chrome 1.0+
Konqueror 3.5+
使用qTip可以很轻松的定义tip的位置以及样式,同时qTip还有一个强大的API......
使用qTip前,只需引入两个JS文件即可:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>

下面举几个比较简单的例子。

1、Basic text

html如下所示:

<div id="content"> 
<a href=" ">Basic text</a> 
</div>

JS代码:
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('#content a[href]').qtip( 
{ 
content: 'Some basic content for the tooltip' 
}); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
2、Title attribute

html如下所示:

<div id="content"> 
<a href=" " title="That sounds familiar...">Title attribute</a> 
</div>

JS代码:
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('#content a[href][title]').qtip({ 
content: { 
text: false 
}, 
style: 'cream' 
}); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
3、Image

html如下所示:
<div id="content"> 
<a href=" ">Image</a> 
</div>

JS代码:
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('#content a[href]').qtip({ 
content: '<img src="small.png" alt="Image" />' 
}); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
4、Corner values

html如下所示:

<div id="content" style="margin-top:200px;margin-left:200px;"> 
<a href=" ">Corner values</a> 
</div>

JS代码:
<script type="text/javascript"> 
var corners = 'bottomLeft'; 
var opposites = 'topRight'; 
$(document).ready(function() 
{ 
$('#content a') 
.hover(function() 
{ 
$(this).html(opposites) 
.qtip({ 
content: corners, 
position: { 
corner: { 
tooltip: corners, 
target: opposites 
} 
}, 
show: { 
when: false, 
ready: true 
}, 
hide: false, 
style: { 
border: { 
width: 5, 
radius: 10 
}, 
padding: 10, 
textAlign: 'center', 
tip: true, 
name: 'cream' 
} 
}); 
}); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
5、Fixed tooltips

html如下所示:
<div id="content"> 
<img src="sample.jpg" alt="" height="200" /> 
</div>

JS代码:
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('#content img').each(function() 
{ 
$(this).qtip( 
{ 
content: '<a href=" ">Edit</a> | <a href=" ">Delete</a>', 
position: 'topRight', 
hide: { 
fixed: true 
}, 
style: { 
padding: '5px 15px', 
name: 'cream' 
} 
}); 
}); 
}); 
</script>

css代码:
<style type="text/css"> 
#content img{ 
float: left; 
margin-right: 35px; 
border: 2px solid #454545; 
padding: 1px; 
} 
</style>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
6、Loading html

html如下所示:
<div id="content"> 
<a href="#" rel="sample.html">Click me</a> 
</div>

JS代码:
Js代码 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('#content a[rel]').each(function() 
{ 
$(this).qtip( 
{ 
content: { 
url: $(this).attr('rel'), 
title: { 
text: 'Wiki - ' + $(this).text(), 
button: 'Close' 
} 
}, 
position: { 
corner: { 
target: 'bottomMiddle', 
tooltip: 'topMiddle' 
}, 
adjust: { 
screen: true 
} 
}, 
show: { 
when: 'click', 
solo: true 
}, 
hide: 'unfocus', 
style: { 
tip: true, 
border: { 
width: 0, 
radius: 4 
}, 
name: 'light', 
width: 570 
} 
}) 
}); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
7、Modal tooltips
html如下所示:
<div id="content"> 
<a href="#" rel="modal">Click here</a> 
</div>

JS代码:
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('a[rel="modal"]:first').qtip( 
{ 
content: { 
title: { 
text: 'Modal tooltips sample', 
button: 'Close' 
}, 
text: 'hello world' 
}, 
position: { 
target: $(document.body), 
corner: 'center' 
}, 
show: { 
when: 'click', 
solo: true 
}, 
hide: false, 
style: { 
width: { max: 350 }, 
padding: '14px', 
border: { 
width: 9, 
radius: 9, 
color: '#666666' 
}, 
name: 'light' 
}, 
api: { 
beforeShow: function() 
{ 
$('#qtip-blanket').fadeIn(this.options.show.effect.length); 
}, 
beforeHide: function() 
{ 
$('#qtip-blanket').fadeOut(this.options.hide.effect.length); 
} 
} 
}); 
$('<div id="qtip-blanket">') 
.css({ 
position: 'absolute', 
top: $(document).scrollTop(), 
left: 0, 
height: $(document).height(), 
width: '100%', 
opacity: 0.7, 
backgroundColor: 'black', 
zIndex: 5000 
}) 
.appendTo(document.body) 
.hide(); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
Javascript 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
简单实现js拖拽效果
Jul 25 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
jquery的Theme和Theme Switcher使用小结
Sep 08 #Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 #Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 #Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 #Javascript
Document对象内容集合(比较全)
Sep 06 #Javascript
Jquery优化效率 提升性能解决方案
Sep 06 #Javascript
jquery中this的使用说明
Sep 06 #Javascript
You might like
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php自定义apk安装包实例
2014/10/20 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python3处理含有中文的url方法
2018/05/10 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python retrying模块的使用方法详解
2019/09/25 Python
使用python绘制温度变化雷达图
2019/10/18 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
初中生自我鉴定
2014/02/04 职场文书
体育之星事迹材料
2014/05/11 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL