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 相关文章推荐
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 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实现的简单压缩英文字符串的代码
2008/04/24 PHP
第六章 php目录与文件操作
2011/12/30 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
给Function做的OOP扩展
2009/05/07 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
JSONP跨域请求
2017/03/02 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
美国知名艺术画网站:Art.com
2017/02/09 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
学年自我鉴定
2014/01/16 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
怎么写工作检讨书
2014/11/16 职场文书
六年级作文之自救
2019/12/19 职场文书
PyTorch的Debug指南
2021/05/07 Python
PHP 时间处理类Carbon
2022/05/20 PHP