How to use jQuery qTip?
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.
I've tried fo开发者_StackOverflow中文版llowing the demos/examples from the qTip site but just can't seem to get it working.
I am unsure if I need to include the HTML Structure in the documentation and if so, where do I place it?
Does this plugin also require a CSS file of some sort?
I believe the problem stems from incompatibility between the new qTip versions and 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 forums to 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.
<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 website and 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.
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 builds for 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.
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.
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.
<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
http://bazaar.launchpad.net/~craig.craigsworks/qtip/1.0/files/25
In ASP.NET I included the jQuery-1.4.2.min.js and jquery.qtip-1.0.js.
No CSS, it should just work.
$(document).ready(function() {
$("#<%= txtUsername.ClientID %>").qtip({
content: 'Your registered username',
style:
{
name: 'blue',
tip: 'leftMiddle'
},
position:
{
corner:
{
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
}
});
}
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.
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.
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.
加载中,请稍侯......
精彩评论