主页:http://craigsworks.com/projects/qtip/ 下载:http://craigsworks.com/projects/qtip/download 示例:http://craigsworks.com/projects/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、Basic text html如下所示: 复制代码 代码如下: Basic text JS代码: 复制代码 代码如下: <BR>$(document).ready(function() <BR>{ <BR>$('#content a[href]').qtip( <BR>{ <BR>content: 'Some basic content for the tooltip' <BR>}); <BR>}); <BR> 2、Title attribute html如下所示: 复制代码 代码如下: Title attribute JS代码: 复制代码 代码如下: <BR>$(document).ready(function() <BR>{ <BR>$('#content a[href][title]').qtip({ <BR>content: { <BR>text: false <BR>}, <BR>style: 'cream' <BR>}); <BR>}); <BR> 3、Image html如下所示: 复制代码 代码如下: Image JS代码: 复制代码 代码如下: <BR>$(document).ready(function() <BR>{ <BR>$('#content a[href]').qtip({ <BR>content: '<img src="small.png" alt="Image" />' <BR>}); <BR>}); <BR> 4、Corner values html如下所示: 复制代码 代码如下: Corner values JS代码: 复制代码 代码如下: <BR>var corners = 'bottomLeft'; <BR>var opposites = 'topRight'; <BR>$(document).ready(function() <BR>{ <BR>$('#content a') <BR>.hover(function() <BR>{ <BR>$(this).html(opposites) <BR>.qtip({ <BR>content: corners, <BR>position: { <BR>corner: { <BR>tooltip: corners, <BR>target: opposites <BR>} <BR>}, <BR>show: { <BR>when: false, <BR>ready: true <BR>}, <BR>hide: false, <BR>style: { <BR>border: { <BR>width: 5, <BR>radius: 10 <BR>}, <BR>padding: 10, <BR>textAlign: 'center', <BR>tip: true, <BR>name: 'cream' <BR>} <BR>}); <BR>}); <BR>}); <BR> 5、Fixed tooltips html如下所示: 复制代码 代码如下: JS代码: 复制代码 代码如下: <BR>$(document).ready(function() <BR>{ <BR>$('#content img').each(function() <BR>{ <BR>$(this).qtip( <BR>{ <BR>content: '<a href=" ">Edit | <a href=" ">Delete', <BR>position: 'topRight', <BR>hide: { <BR>fixed: true <BR>}, <BR>style: { <BR>padding: '5px 15px', <BR>name: 'cream' <BR>} <BR>}); <BR>}); <BR>}); <BR> css代码: 复制代码 代码如下: <BR>#content img{ <BR>float: left; <BR>margin-right: 35px; <BR>border: 2px solid #454545; <BR>padding: 1px; <BR>} <BR> 6、Loading html html如下所示: Html代码 复制代码 代码如下: Click me JS代码: 复制代码 代码如下: <BR>$(document).ready(function() <BR>{ <BR>$('#content a[rel]').each(function() <BR>{ <BR>$(this).qtip( <BR>{ <BR>content: { <BR>url: $(this).attr('rel'), <BR>title: { <BR>text: 'Wiki - ' + $(this).text(), <BR>button: 'Close' <BR>} <BR>}, <BR>position: { <BR>corner: { <BR>target: 'bottomMiddle', <BR>tooltip: 'topMiddle' <BR>}, <BR>adjust: { <BR>screen: true <BR>} <BR>}, <BR>show: { <BR>when: 'click', <BR>solo: true <BR>}, <BR>hide: 'unfocus', <BR>style: { <BR>tip: true, <BR>border: { <BR>width: 0, <BR>radius: 4 <BR>}, <BR>name: 'light', <BR>width: 570 <BR>} <BR>}) <BR>}); <BR>}); <BR> 7、Modal tooltips html如下所示: Html代码 复制代码 代码如下: Click here JS代码: 复制代码 代码如下: <BR>$(document).ready(function() <BR>{ <BR>$('a[rel="modal"]:first').qtip( <BR>{ <BR>content: { <BR>title: { <BR>text: 'Modal tooltips sample', <BR>button: 'Close' <BR>}, <BR>text: 'hello world' <BR>}, <BR>position: { <BR>target: $(document.body), <BR>corner: 'center' <BR>}, <BR>show: { <BR>when: 'click', <BR>solo: true <BR>}, <BR>hide: false, <BR>style: { <BR>width: { max: 350 }, <BR>padding: '14px', <BR>border: { <BR>width: 9, <BR>radius: 9, <BR>color: '#666666' <BR>}, <BR>name: 'light' <BR>}, <BR>api: { <BR>beforeShow: function() <BR>{ <BR>$('#qtip-blanket').fadeIn(this.options.show.effect.length); <BR>}, <BR>beforeHide: function() <BR>{ <BR>$('#qtip-blanket').fadeOut(this.options.hide.effect.length); <BR>} <BR>} <BR>}); <BR>$('<div id="qtip-blanket">') <BR>.css({ <BR>position: 'absolute', <BR>top: $(document).scrollTop(), <BR>left: 0, <BR>height: $(document).height(), <BR>width: '100%', <BR>opacity: 0.7, <BR>backgroundColor: 'black', <BR>zIndex: 5000 <BR>}) <BR>.appendTo(document.body) <BR>.hide(); <BR>}); <BR>