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

来源：动视网责编：小采时间：2020-11-27 20:55:02

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

jquery的Tooltip插件qtip使用详细说明_jquery:例如： 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文件即可：代码

推荐度：

点击下载本文 文档为doc格式

导读jquery的Tooltip插件qtip使用详细说明_jquery:例如： 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文件即可：代码

例如：
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、Basic text

html如下所示：
代码如下:

Basic text

JS代码：
代码如下:

$(document).ready(function()
{
$('#content a[href]').qtip(
{
content: 'Some basic content for the tooltip'
});
});

效果如图所示：

2、Title attribute

html如下所示：
代码如下:

Title attribute

JS代码：
代码如下:

$(document).ready(function()
{
$('#content a[href][title]').qtip({
content: {
text: false
},
style: 'cream'
});
});

效果如图所示：

3、Image

html如下所示：
代码如下:

Image

JS代码：
代码如下:

$(document).ready(function()
{
$('#content a[href]').qtip({
content: ''
});
});

效果如图所示：

4、Corner values

html如下所示：
代码如下:

Corner values

JS代码：
代码如下:

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'
}
});
});
});

效果如图所示：

5、Fixed tooltips

html如下所示：

代码如下:

JS代码：
代码如下:

$(document).ready(function()
{
$('#content img').each(function()
{
$(this).qtip(
{
content: 'Edit | Delete',
position: 'topRight',
hide: {
fixed: true
},
style: {
padding: '5px 15px',
name: 'cream'
}
});
});
});

css代码：
代码如下:

效果如图所示：

6、Loading html

html如下所示：
代码如下:

Click me

JS代码：
代码如下:
Js代码

$(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
}
})
});
});

效果如图所示：

7、Modal tooltips
html如下所示：
代码如下:

Click here

JS代码：
代码如下:

$(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);
}
}
});
$('')
.css({
position: 'absolute',
top: $(document).scrollTop(),
left: 0,
height: $(document).height(),
width: '100%',
opacity: 0.7,
backgroundColor: 'black',
zIndex: 5000
})
.appendTo(document.body)
.hide();
});

效果如图所示：