How to use jQuery qTip?

How to use jQuery qTip?

I believe the problem stems from incompatibility between the new qTip versions and jQuery.

Ive 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 Ive noticed that the following code within the thread works perfectly, but if its 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. Ill 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 its 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 doesnt 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

How to use jQuery qTip?

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
        }
    }
    });
}

Leave a Reply

Your email address will not be published.