如果有人可以告诉我一个简单的例子,如何设置和使用qTip jquery插件的工具提示显示在我悬停在图像的左下角。
我已经尝试从网站的演示/示例:> qTip但只是不能似乎得到它的工作。
我不确定是否需要在文档中包含HTML结构,如果需要,我在哪里放置它?
无论如何,会真的很感激,如果有人可以解释/设置一个使用qtip的例子。也会感谢,如果我没有重定向回qTip演示页。
谢谢。
解决方法
我相信这个问题源于新的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,那么你可以下载一个nightly builds的qTip。使用上面的示例,我交换了最新的jQuery(1.4.2)的两个脚本与最新的夜间构建,它似乎工作。