如何使用 jQuery qTip？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2950004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use jQuery qTip?
提问by tonyf
Would someone show me a simple example of how to setup and use qTip jQuery plugin for a tooltip to display at the bottom-left of where I hover over an image.
有人会向我展示一个简单的示例，说明如何设置和使用 qTip jQuery 插件，以便在我将鼠标悬停在图像上的左下角显示工具提示。
I've tried following the demos/examples from the qTip sitebut just can't seem to get it working.
我已经尝试按照qTip 站点上的演示/示例进行操作，但似乎无法使其正常工作。
I am unsure if I need to include the HTML Structure in the documentation and if so, where do I place it?
我不确定是否需要在文档中包含 HTML 结构，如果需要，我应该把它放在哪里？
Does this plugin also require a CSS file of some sort?
这个插件是否也需要某种 CSS 文件？
回答by Mike B
I believe the problem stems from incompatibility between the new qTip versions and jQuery.
我相信这个问题源于新的 qTip 版本和 jQuery 之间的不兼容。
I've spent the last hour testing code with qTip to try and find out why my code refused to work and after looking through the forumsto see if I could find similar problems I've noticed that the following code within the thread works perfectly, but if it's swapped with a newer version of jQuery it produces an error.
我花了最后一个小时用 qTip 测试代码，试图找出我的代码拒绝工作的原因，在浏览论坛以查看是否可以找到类似问题后，我注意到线程中的以下代码运行良好，但如果它与较新版本的 jQuery 交换，则会产生错误。
<html>
<head>
<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>
<script type="text/javascript">
$( document ).ready( function( ) {
$.fn.qtip.styles.tooltipDefault = {
background : '#132531',
color : '#FFFFFF',
textAlign : 'left',
border : {
width : 2,
radius : 4,
color : '#C1CFDD'
},
width : 220
}
// we are going to run through each element with the classRating class
$( '.classRating' ).each( function( ) {
var rating = $( this ).attr( 'rating' );
// the element has no rating tag or the rating tag is empty
if ( rating == undefined || rating == '' ) {
rating = 'I have not yet been rated.';
}
else {
rating = 'The rating for this is ' + rating + '%';
}
// create the tooltip for the current element
$( this ).qtip( {
content : rating,
position : {
target : 'mouse'
},
style : 'tooltipDefault'
} );
} );
} );
</script>
</head>
<body>
<div id="SomeID1" class="classRating" rating="73">I have a rating</div>
<div id="SomeID2" class="classRating" rating="66">I have a rating</div>
<div id="SomeID3" class="classRating" rating="">I have a rating but it is empty</div>
<div id="SomeID4" class="classRating">I dont have a rating</div>
</body>
</html>
I downloaded jQuery 1.3.2 from the Google Code websiteand this example now works perfectly for me. I'll soon start tailoring this code to my needs to see if there are any other problems but for anyone still suffering this problem I hope this post is useful.
我从 Google Code 网站下载了jQuery 1.3.2，这个例子现在非常适合我。我很快就会开始根据我的需要定制这段代码，看看是否还有其他问题，但对于仍然遇到这个问题的人，我希望这篇文章有用。
EDIT:It looks like it's a version incompatibility problem. This simple code from the documentation website works perfectly now with these same versions. Hope this is helpful for you!
编辑：看起来这是一个版本不兼容问题。来自文档网站的这个简单代码现在可以完美地与这些相同的版本一起使用。希望这对你有帮助！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<a href="#" title="Hello World" class="example">Test</a>
<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>
<script type="text/javascript">
$(document).ready(function() {
// By suppling no content attribute, the library uses each elements title attribute by default
$('a[href][title]').qtip({
content: {
text: false // Use each elements title attribute
},
style: 'cream' // Give it some style
});
// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
// $('#content a[href]').qtip();
});
</script>
</body>
</html>
EDIT 2:There is a new version of qTip in the works so it may be worth waiting for that, however if you want to use qTip with the latest version of jQuery then you can download one of the nightly buildsfor qTip. Using the above example I swapped both scripts for the latest jQuery (1.4.2) with the latest nightly build and it seems to work.
编辑 2：有一个新版本的 qTip 正在开发中，因此可能值得等待，但是如果您想将 qTip 与最新版本的 jQuery 一起使用，那么您可以下载qTip的每晚构建之一。使用上面的例子，我用最新的每晚构建交换了最新的 jQuery (1.4.2) 的两个脚本，它似乎工作。
回答by TheAlbear
Right I think I know what you are after something which just shows how to attach the qTip to the html, there examples are not great.
是的，我想我知道你在追求什么，它只是展示了如何将 qTip 附加到 html，有些例子不是很好。
The example below will show the qTip off a image and show the tip centred and to the right of the image, in a nice two tone green.
下面的示例将显示图像上的 qTip，并以漂亮的两色调绿色显示居中和图像右侧的尖端。
<html>
<head>
<script src="/js/jquery-compressed-1.4.2.js" type="text/javascript"></script>
<script src="/js/jquery.qtip-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() {
// Match all link elements with href attributes within the content div
$('#claimform a[rel=tip]').qtip({
content: { text: true
},
style: {
width: 250,
tip: 'leftMiddle',
color: 'white',
background:'#66CC33',
name: 'green'
},
position: {
corner: { target: 'rightMiddle',
tooltip: 'leftMiddle'
},
adjust: { x: 20, y: 0 }
}
});
});
</script>
<div id="claimform">
<a href="#" rel="tip" title="Your customer ID as shown on the top right hand side of your papaer bill that you should have received through the post"><img src="/images/css/tip.gif" alt="tip" class="tip" /></a>
</div>
</body>
</html>
On thing to note with this is I am using jquery 1.4.2, this doesn't work with the typical download of the compressed version of qTip you need to use build number 25
需要注意的是，我使用的是 jquery 1.4.2，这不适用于 qTip 压缩版本的典型下载，您需要使用内部版本号 25
http://bazaar.launchpad.net/~craig.craigsworks/qtip/1.0/files/25
http://bazaar.launchpad.net/~craig.craigsworks/qtip/1.0/files/25
回答by user527269
The HTML Structure referred to on the qTip site is just an example of the the html that is created when using the plugin. It isn't part of the code that needs to be added to the page to get it to work.
qTip 站点上引用的 HTML 结构只是使用插件时创建的 html 的一个示例。它不是需要添加到页面才能使其工作的代码的一部分。
回答by tchaymore
You can also follow the instructions at the qTip forums here: http://craigsworks.com/projects/forums/thread-solved-qtip-1-0-0rc3-does-not-work-with-latest-jquery-release. By modifying one line of code in the qTip plugin (though it is hard to find the code in the 'min' version), you'll restore compatibility with jQuery.
您还可以按照 qTip 论坛上的说明进行操作：http: //craigsworks.com/projects/forums/thread-solved-qtip-1-0-0rc3-does-not-work-with-latest-jquery-release。通过修改 qTip 插件中的一行代码（尽管在“min”版本中很难找到代码），您将恢复与 jQuery 的兼容性。
Basically, change:
基本上，改变：
if(typeof $(this).data('qtip') == 'object')
To:
到：
if(typeof $(this).data('qtip') === 'object' && $(this).data('qtip'))
That should do the trick; worked for me.
这应该够了吧; 为我工作。
回答by Pieter Germishuys
In ASP.NET I included the jQuery-1.4.2.min.js and jquery.qtip-1.0.js.
在 ASP.NET 中，我包含了 jQuery-1.4.2.min.js 和 jquery.qtip-1.0.js。
No CSS, it should just work.
没有 CSS，它应该可以正常工作。
$(document).ready(function() {
$("#<%= txtUsername.ClientID %>").qtip({
content: 'Your registered username',
style:
{
name: 'blue',
tip: 'leftMiddle'
},
position:
{
corner:
{
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
}
});
}
