jquery的Tooltip插件 qtip使用詳細(xì)說(shuō)明
更新時(shí)間:2010年09月08日 09:14:58 作者:
qTip是一個(gè)基于JQuery的Tooltip插件。它幾乎支持所有的主流瀏覽器。
例如:
Internet Explorer 6.0+
Firefox 2.0+
Opera 9.0+
Safari 3.0+
Google Chrome 1.0+
Konqueror 3.5+
使用qTip可以很輕松的定義tip的位置以及樣式,同時(shí)qTip還有一個(gè)強(qiáng)大的API......
使用qTip前,只需引入兩個(gè)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>
下面舉幾個(gè)比較簡(jiǎn)單的例子。
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>
效果如圖所示:

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>
效果如圖所示:

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>
效果如圖所示:

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>
效果如圖所示:

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>
效果如圖所示:

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>
效果如圖所示:

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>
效果如圖所示:
Internet Explorer 6.0+
Firefox 2.0+
Opera 9.0+
Safari 3.0+
Google Chrome 1.0+
Konqueror 3.5+
使用qTip可以很輕松的定義tip的位置以及樣式,同時(shí)qTip還有一個(gè)強(qiáng)大的API......
使用qTip前,只需引入兩個(gè)JS文件即可:
復(fù)制代碼 代碼如下:
<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>
下面舉幾個(gè)比較簡(jiǎn)單的例子。
1、Basic text
html如下所示:
復(fù)制代碼 代碼如下:
<div id="content">
<a href=" ">Basic text</a>
</div>
JS代碼:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function()
{
$('#content a[href]').qtip(
{
content: 'Some basic content for the tooltip'
});
});
</script>
效果如圖所示:

2、Title attribute
html如下所示:
復(fù)制代碼 代碼如下:
<div id="content">
<a href=" " title="That sounds familiar...">Title attribute</a>
</div>
JS代碼:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function()
{
$('#content a[href][title]').qtip({
content: {
text: false
},
style: 'cream'
});
});
</script>
效果如圖所示:

3、Image
html如下所示:
復(fù)制代碼 代碼如下:
<div id="content">
<a href=" ">Image</a>
</div>
JS代碼:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function()
{
$('#content a[href]').qtip({
content: '<img src="small.png" alt="Image" />'
});
});
</script>
效果如圖所示:

4、Corner values
html如下所示:
復(fù)制代碼 代碼如下:
<div id="content" style="margin-top:200px;margin-left:200px;">
<a href=" ">Corner values</a>
</div>
JS代碼:
復(fù)制代碼 代碼如下:
<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>
效果如圖所示:

5、Fixed tooltips
html如下所示:
復(fù)制代碼 代碼如下:
<div id="content">
<img src="sample.jpg" alt="" height="200" />
</div>
JS代碼:
復(fù)制代碼 代碼如下:
<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代碼:
復(fù)制代碼 代碼如下:
<style type="text/css">
#content img{
float: left;
margin-right: 35px;
border: 2px solid #454545;
padding: 1px;
}
</style>
效果如圖所示:

6、Loading html
html如下所示:
復(fù)制代碼 代碼如下:
<div id="content">
<a href="#" rel="sample.html">Click me</a>
</div>
JS代碼:
復(fù)制代碼 代碼如下:
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>
效果如圖所示:

7、Modal tooltips
html如下所示:
復(fù)制代碼 代碼如下:
<div id="content">
<a href="#" rel="modal">Click here</a>
</div>
JS代碼:
復(fù)制代碼 代碼如下:
<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 tools之tooltip
- jQuery Tools tooltip使用說(shuō)明
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- jQuery帶箭頭提示框tooltips插件集錦
- 25個(gè)優(yōu)雅的jQuery Tooltip插件推薦
- jquery.cvtooltip.js 基于jquery的氣泡提示插件
- 基于jquery的自定義鼠標(biāo)提示效果 jquery.toolTip
- qTip 基于JQuery的Tooltip插件[兼容性好]
- Jquery實(shí)現(xiàn)自定義tooltip示例代碼
- jQuery自制提示框tooltip改進(jìn)版
相關(guān)文章
jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法,涉及jQuery操作隨機(jī)數(shù)及頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05jQuery remove()過(guò)濾被刪除的元素(推薦)
jQuery remove() 方法也可接受一個(gè)參數(shù),允許您對(duì)被刪元素進(jìn)行過(guò)濾。下面通過(guò)實(shí)例代碼給大家介紹jQuery remove()過(guò)濾被刪除的元素,需要的的朋友參考下吧2017-07-07Web開(kāi)發(fā)者必備的12款超贊jQuery插件
jQuery插件能夠增強(qiáng)網(wǎng)站的可用性,有效地改善用戶體驗(yàn),還可以大大減少創(chuàng)建一個(gè)新站點(diǎn)的開(kāi)發(fā)時(shí)間。2010-12-12jqGrid表格底部匯總、合計(jì)行footerrow處理
這篇文章主要為大家詳細(xì)介紹了jqGrid表格底部匯總、合計(jì)行footerrow處理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08從jquery的過(guò)濾器.filter()方法想到的
.filter()方法可以接受一個(gè)函數(shù)作為參數(shù),然后根據(jù)函數(shù)的返回值判斷,這就是jquery選擇器的過(guò)濾器,下面有個(gè)不錯(cuò)的示例,大家可以參考下2013-09-09