How to use jQuery qTip?

Question

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="https://stackoverflow.com/questions/2950004/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="https://stackoverflow.com/questions/2950004/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]How to use jQuery qTip?').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.

Leave a Comment Cancel reply