qTip 基于JQuery的Tooltip插件[兼容性好]

主页:

下载:

示例:

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文件即可：

复制代码 代码如下:

<script type="text/javascript" src="https://www.jb51.net/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/jquery.qtip-1.0.0-rc3.min.js"></script>

下面举几个比较简单的例子。

1、Basic text

html如下所示：

复制代码 代码如下:

<div>
<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>
<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>
<a href=" ">Image</a>
</div>

JS代码：

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$('#content a[href]').qtip({
content: '<img src="https://www.jb51.net/small.png" alt="Image" />'
});
});
</script>

4、Corner values

html如下所示：

复制代码 代码如下:

<div>
<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>
<img src="https://www.jb51.net/sample.jpg" alt="" />
</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如下所示：

Html代码

复制代码 代码如下:

<div>
<a href="#">Click me</a>
</div>

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如下所示：

Html代码

复制代码 代码如下:

<div>
<a href="#">Click here</a>
</div>

JS代码：

复制代码 代码如下: