有人能告诉我一个简单的例子，说明如何设置和使用 qTip jQuery 插件，以便在我将鼠标悬停在图像的左下角显示工具提示。
我已尝试遵循 the qTip site 的演示/示例，但似乎无法正常工作。
我不确定是否需要在文档中包含 HTML 结构，如果需要，我应该把它放在哪里？
这个插件是否也需要某种 CSS 文件？
【问题讨论】：
标签： jquery jquery-plugins
我认为问题源于新的 qTip 版本和 jQuery 之间的不兼容。
我花了最后一个小时使用 qTip 测试代码，试图找出我的代码拒绝工作的原因，并在查看 forums 以查看是否可以找到类似的问题后，我注意到以下代码在该线程运行良好，但如果它与更新版本的 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>
我下载了jQuery 1.3.2 from the Google Code website，这个例子现在非常适合我。我很快就会开始根据我的需要定制这段代码，看看是否还有其他问题，但对于仍然遇到这个问题的人，我希望这篇文章有用。
编辑： 看起来是版本不兼容问题。文档网站上的这个简单代码现在可以与这些相同的版本完美配合。希望对您有所帮助！
<!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>
编辑 2： 有一个新版本的 qTip 正在开发中，所以可能值得等待，但是如果你想将 qTip 与最新版本的 jQuery 一起使用，那么你可以下载一个qTip 的nightly builds。使用上面的示例，我将两个脚本换成了最新的 jQuery (1.4.2) 和最新的 nightly build，它似乎可以工作。
【讨论】：
是的，我想我知道你在做什么，只是展示了如何将 qTip 附加到 html，示例不是很好。
下面的示例将显示图像的 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>
需要注意的是，我使用的是 jquery 1.4.2，这不适用于典型的 qTip 压缩版本下载，您需要使用内部版本号 25
http://bazaar.launchpad.net/~craig.craigsworks/qtip/1.0/files/25
【讨论】：
在 ASP.NET 中，我包含了 jQuery-1.4.2.min.js 和 jquery.qtip-1.0.js。
没有 CSS，它应该可以工作。
$(document).ready(function() {
$("#<%= txtUsername.ClientID %>").qtip({
content: 'Your registered username',
style:
{
name: 'blue',
tip: 'leftMiddle'
},
position:
{
corner:
{
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
}
});
}
【讨论】：
您也可以按照 qTip 论坛上的说明进行操作：http://craigsworks.com/projects/forums/thread-solved-qtip-1-0-0rc3-does-not-work-with-latest-jquery-release。通过修改 qTip 插件中的一行代码（虽然在 'min' 版本中很难找到代码），您将恢复与 jQuery 的兼容性。
基本上，改变：
if(typeof $(this).data('qtip') == 'object')
收件人：
if(typeof $(this).data('qtip') === 'object' && $(this).data('qtip'))
这应该可以解决问题；为我工作。
【讨论】：
qTip 网站上提到的 HTML 结构只是使用插件时创建的 html 的一个示例。它不是需要添加到页面以使其工作的代码的一部分。
【讨论】：