JQuery的Tooltip插件--qtip 总结
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 id="qtip-blanket">') |
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
(请您对文章做出评价)
