qTip是一个基于JQuery的Tooltip插件。它几乎支持所有的主流浏览器，例如：
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文件即可：
1 |
Html代码 |
下面举几个比较简单的例子。
1、Basic text
html如下所示：
JS代码：
效果如图所示：
2、Title attribute
html如下所示：
JS代码：
01 |
|
02 |
<script type="text/javascript">
|
03 |
$(document).ready(function()
|
04 |
{
|
05 |
$('#content a[href][title]').qtip({
|
06 |
content: {
|
07 |
text: false |
08 |
},
|
09 |
style: 'cream' |
10 |
});
|
11 |
});
|
12 |
</script> |
效果如图所示：
3、Image
html如下所示：
JS代码：
效果如图所示：
4、Corner values
html如下所示：
JS代码：
01 |
|
02 |
<script type="text/javascript">
|
03 |
|
04 |
var corners = 'bottomLeft';
|
05 |
var opposites = 'topRight';
|
06 |
|
07 |
$(document).ready(function()
|
08 |
{
|
09 |
$('#content a')
|
10 |
.hover(function()
|
11 |
{
|
12 |
$(this).html(opposites)
|
13 |
.qtip({
|
14 |
content: corners,
|
15 |
position: {
|
16 |
corner: {
|
17 |
tooltip: corners,
|
18 |
target: opposites
|
19 |
}
|
20 |
},
|
21 |
show: {
|
22 |
when: false,
|
23 |
ready: true |
24 |
},
|
25 |
hide: false,
|
26 |
style: {
|
27 |
border: {
|
28 |
width: 5,
|
29 |
radius: 10
|
30 |
},
|
31 |
padding: 10,
|
32 |
textAlign: 'center',
|
33 |
tip: true,
|
34 |
name: 'cream' |
35 |
}
|
36 |
});
|
37 |
});
|
38 |
});
|
39 |
</script> |
效果如图所示：
5、Fixed tooltips
html如下所示：
JS代码：
css代码：
01 |
|
02 |
<style type="text/css"> |
03 |
#content img{
|
04 |
float: left;
|
05 |
margin-right: 35px;
|
06 |
|
07 |
border: 2px solid #454545;
|
08 |
padding: 1px;
|
09 |
}
|
10 |
</style> |
效果如图所示：
6、Loading html
html如下所示：
JS代码：
01 |
Js代码 |
02 |
<script type="text/javascript">
|
03 |
$(document).ready(function()
|
04 |
{
|
05 |
$('#content a[rel]').each(function()
|
06 |
{
|
07 |
$(this).qtip(
|
08 |
{
|
09 |
content: {
|
10 |
url: $(this).attr('rel'),
|
11 |
title: {
|
12 |
text: 'Wiki - ' + $(this).text(),
|
13 |
button: 'Close' |
14 |
}
|
15 |
},
|
16 |
position: {
|
17 |
corner: {
|
18 |
target: 'bottomMiddle',
|
19 |
tooltip: 'topMiddle' |
20 |
},
|
21 |
adjust: {
|
22 |
screen: true |
23 |
}
|
24 |
},
|
25 |
show: {
|
26 |
when: 'click',
|
27 |
solo: true |
28 |
},
|
29 |
hide: 'unfocus',
|
30 |
style: {
|
31 |
tip: true,
|
32 |
border: {
|
33 |
width: 0,
|
34 |
radius: 4
|
35 |
},
|
36 |
name: 'light',
|
37 |
width: 570
|
38 |
}
|
39 |
})
|
40 |
});
|
41 |
});
|
42 |
</script> |
效果如图所示：
7、Modal tooltips
html如下所示：
1 |
|
2 |
<div id="content">
|
3 |
<a href="#" rel="modal">Click here</a>
|
4 |
</div> |
JS代码：
01 |
|
02 |
<script type="text/javascript">
|
03 |
$(document).ready(function()
|
04 |
{
|
05 |
$('a[rel="modal"]:first').qtip(
|
06 |
{
|
07 |
content: {
|
08 |
title: {
|
09 |
text: 'Modal tooltips sample',
|
10 |
button: 'Close' |
11 |
},
|
12 |
text: 'hello world' |
13 |
},
|
14 |
position: {
|
15 |
target: $(document.body),
|
16 |
corner: 'center' |
17 |
},
|
18 |
show: {
|
19 |
when: 'click',
|
20 |
solo: true |
21 |
},
|
22 |
hide: false,
|
23 |
style: {
|
24 |
width: { max: 350 },
|
25 |
padding: '14px',
|
26 |
border: {
|
27 |
width: 9,
|
28 |
radius: 9,
|
29 |
color: '#666666' |
30 |
},
|
31 |
name: 'light' |
32 |
},
|
33 |
api: {
|
34 |
beforeShow: function()
|
35 |
{
|
36 |
$('#qtip-blanket').fadeIn(this.options.show.effect.length);
|
37 |
},
|
38 |
beforeHide: function()
|
39 |
{
|
40 |
$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
|
41 |
}
|
42 |
}
|
43 |
});
|
44 |
|
45 |
$('<div >)
|
46 |
.css({
|
47 |
position: 'absolute',
|
48 |
top: $(document).scrollTop(),
|
49 |
left: 0,
|
50 |
height: $(document).height(),
|
51 |
width: '100%',
|
52 |
|
53 |
opacity: 0.7,
|
54 |
backgroundColor: 'black',
|
55 |
zIndex: 5000
|
56 |
})
|
57 |
.appendTo(document.body)
|
58 |
.hide();
|
59 |
});
|
60 |
</script> |
效果如图所示：
关注博主
1
0
0
(请您对文章做出评价)