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

Phedra ·

更新时间:2024-11-10

· 945 次阅读

主页:http://craigsworks.com/projects/qtip/%20

下载:http://craigsworks.com/projects/qtip/download

示例:http://craigsworks.com/projects/qtip/

qTip是一个基于JQuery的Tooltip插件。它几乎支持所有的主流浏览器
例如：%20
Internet%20Explorer%206.0+%20
Firefox%202.0+%20
Opera%209.0+%20
Safari%203.0+%20
Google%20Chrome%201.0+%20
Konqueror%203.5+%20
使用qTip可以很轻松的定义tip的位置以及样式，同时qTip还有一个强大的API......%20
使用qTip前，只需引入两个JS文件即可：%20
%20代码如下:%20
<script%20type="text/javascript"%20src="jquery-1.3.2.min.js"></script>%20
<script%20type="text/javascript"%20src="jquery.qtip-1.0.0-rc3.min.js"></script>%20
%20
下面举几个比较简单的例子。%20
1、Basic%20text%20
html如下所示：%20
%20代码如下:%20
<div%20id="content">%20
<a%20href="%20">Basic%20text</a>%20
</div>%20
%20
JS代码：%20
%20代码如下:%20
<script%20type="text/javascript">%20
$(document).ready(function()%20
{%20
$('#content%20a[href]').qtip(%20
{%20
content:%20'Some%20basic%20content%20for%20the%20tooltip'%20
});%20
});%20
</script>%20
%20
2、Title%20attribute%20
html如下所示：%20
%20代码如下:%20
<div%20id="content">%20
<a%20href="%20"%20title="That%20sounds%20familiar...">Title%20attribute</a>%20
</div>%20
%20
JS代码：%20
%20代码如下:%20
<script%20type="text/javascript">%20
$(document).ready(function()%20
{%20
$('#content%20a[href][title]').qtip({%20
content:%20{%20
text:%20false%20
},%20
style:%20'cream'%20
});%20
});%20
</script>%20
%20
3、Image%20
html如下所示：%20
%20代码如下:%20
<div%20id="content">%20
<a%20href="%20">Image</a>%20
</div>%20
%20
JS代码：%20
%20代码如下:%20
<script%20type="text/javascript">%20
$(document).ready(function()%20
{%20
$('#content%20a[href]').qtip({%20
content:%20'<img%20src="small.png"%20alt="Image"%20/>'%20
});%20
});%20
</script>%20
%20
4、Corner%20values%20
html如下所示：%20
%20代码如下:%20
<div%20id="content"%20style="margin-top:200px;margin-left:200px;">%20
<a%20href="%20">Corner%20values</a>%20
</div>%20
%20
JS代码：%20
%20代码如下:%20
<script%20type="text/javascript">%20
var%20corners%20=%20'bottomLeft';%20
var%20opposites%20=%20'topRight';%20
$(document).ready(function()%20
{%20
$('#content%20a')%20
.hover(function()%20
{%20
$(this).html(opposites)%20
.qtip({%20
content:%20corners,%20
position:%20{%20
corner:%20{%20
tooltip:%20corners,%20
target:%20opposites%20
}%20
},%20
show:%20{%20
when:%20false,%20
ready:%20true%20
},%20
hide:%20false,%20
style:%20{%20
border:%20{%20
width:%205,%20
radius:%2010%20
},%20
padding:%2010,%20
textAlign:%20'center',%20
tip:%20true,%20
name:%20'cream'%20
}%20
});%20
});%20
});%20
</script>%20
%20
5、Fixed%20tooltips%20
html如下所示：%20
%20代码如下:%20
<div%20id="content">%20
<img%20src="sample.jpg"%20alt=""%20height="200"%20/>%20
</div>%20
%20
JS代码：%20
%20代码如下:%20
<script%20type="text/javascript">%20
$(document).ready(function()%20
{%20
$('#content%20img').each(function()%20
{%20
$(this).qtip(%20
{%20
content:%20'<a%20href="%20">Edit</a>%20|%20<a%20href="%20">Delete</a>',%20
position:%20'topRight',%20
hide:%20{%20
fixed:%20true%20
},%20
style:%20{%20
padding:%20'5px%2015px',%20
name:%20'cream'%20
}%20
});%20
});%20
});%20
</script>%20
%20
css代码：%20
%20代码如下:%20
<style%20type="text/css">%20
#content%20img{%20
float:%20left;%20
margin-right:%2035px;%20
border:%202px%20solid%20#454545;%20
padding:% 201px;%20
}%20
</style>%20
%20
6、Loading%20html%20
html如下所示：%20
Html代码%20
%20代码如下:%20
<div%20id="content">%20
<a%20href="#"%20rel="sample.html">Click%20me</a>%20
</div>%20
%20
JS代码：%20
%20代码如下:%20
<script%20type="text/javascript">%20
$(document).ready(function()%20
{%20
$('#content%20a[rel]').each(function()%20
{%20
$(this).qtip(%20
{%20
content:%20{%20
url:%20$(this).attr('rel'),%20
title:%20{%20
text:%20'Wiki%20-%20'%20+%20$(this).text(),%20
button:%20'Close'%20
}%20
},%20
position:%20{%20
corner:%20{%20
target:%20'bottomMiddle',%20
tooltip:%20'topMiddle'%20
},%20
adjust:%20{%20
screen:%20true%20
}%20
},%20
show:%20{%20
when:%20'click',%20
solo:%20true%20
},%20
hide:%20'unfocus',%20
style:%20{%20
tip:%20true,%20
border:%20{%20
width:%200,%20
radius:%204%20
},%20
name:%20'light',%20
width:%20570%20
}%20
})%20
});%20
});%20
</script>%20
%20
7、Modal%20tooltips%20
html如下所示：%20
Html代码%20
%20代码如下:%20
<div%20id="content">%20
<a%20href="#"%20rel="modal">Click%20here</a>%20
</div>%20
%20
JS代码：%20
%20代码如下:%20
<script%20type="text/javascript">%20
$(document).ready(function()%20
{%20
$('a[rel="modal"]:first').qtip(%20
{%20
content:%20{%20
title:%20{%20
text:%20'Modal%20tooltips%20sample',%20
button:%20'Close'%20
},%20
text:%20'hello%20world'%20
},%20
position:%20{%20
target:%20$(document.body),%20
corner:%20'center'%20
},%20
show:%20{%20
when:%20'click',%20
solo:%20true%20
},%20
hide:%20false,%20
style:%20{%20
width:%20{%20max:%20350%20},%20
padding:%20'14px',%20
border:%20{%20
width:%209,%20
radius:%209,%20
color:%20'#666666'%20
},%20
name:%20'light'%20
},%20
api:%20{%20
beforeShow:%20function()%20
{%20
$('#qtip-blanket').fadeIn(this.options.show.effect.length);%20
},%20
beforeHide:%20function()%20
{%20
$('#qtip-blanket').fadeOut(this.options.hide.effect.length);%20
}%20
}%20
});%20
$('<div%20id="qtip-blanket">')%20
.css({%20
position:%20'absolute',%20
top:%20$(document).scrollTop(),%20
left:%200,%20
height:%20$(document).height(),%20
width:%20'100%',%20
opacity:%200.7,%20
backgroundColor:%20'black',%20
zIndex:%205000%20
})%20
.appendTo(document.body)%20
.hide();%20
});%20
</script>%20

tooltip 兼容兼容性 jQuery

1024 个赞