web-dev-qa-db-fra.com

Comment utiliser jQuery qTip?

Quelqu'un pourrait-il me montrer un exemple simple de configuration et d'utilisation du plug-in qTip jQuery pour une info-bulle à afficher en bas à gauche de l'endroit où je passe la souris sur une image.

J'ai essayé de suivre les démos/exemples de le site qTip mais je n'arrive pas à le faire fonctionner.

Je ne sais pas si j'ai besoin d'inclure la structure HTML dans la documentation et si oui, où dois-je la placer?

Ce plugin nécessite-t-il également un fichier CSS quelconque?

jqueryjquery-plugins
31
tonyf

Je crois que le problème provient de l'incompatibilité entre les nouvelles versions de qTip et jQuery.

J'ai passé la dernière heure à tester le code avec qTip pour essayer de savoir pourquoi mon code a refusé de fonctionner et après avoir parcouru le forums pour voir si je pouvais trouver des problèmes similaires, j'ai remarqué que ce qui suit le code dans le thread fonctionne parfaitement, mais s'il est échangé avec une version plus récente de jQuery, il génère une erreur.

<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>

J'ai téléchargé jQuery 1.3.2 sur le site Web de Google Code et cet exemple fonctionne maintenant parfaitement pour moi. Je vais bientôt commencer à adapter ce code à mes besoins pour voir s'il y a d'autres problèmes, mais pour tous ceux qui souffrent toujours de ce problème, j'espère que ce message est utile.

EDIT: Il semble que ce soit un problème d'incompatibilité de version. Ce code simple du site de documentation fonctionne parfaitement maintenant avec ces mêmes versions. J'espère que cela vous sera utile!

<!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: Il y a une nouvelle version de qTip dans les travaux donc cela peut valoir la peine d'attendre cela, cependant si vous voulez utiliser qTip avec la dernière version de jQuery alors vous pouvez télécharger l'un des builds nocturnes pour qTip. En utilisant l'exemple ci-dessus, j'ai échangé les deux scripts pour la dernière jQuery (1.4.2) avec la dernière version nocturne et cela semble fonctionner.

19
Mike B

Bon, je pense que je sais ce que vous cherchez après quelque chose qui montre simplement comment attacher le qTip au html, il n'y a pas d'exemples.

L'exemple ci-dessous montre le qTip off une image et montre la pointe centrée et à droite de l'image, dans un joli vert bicolore.

<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>

Une chose à noter avec ceci est que j'utilise jquery 1.4.2, cela ne fonctionne pas avec le téléchargement typique de la version compressée de qTip, vous devez utiliser le numéro de build 25

http://Bazaar.launchpad.net/~craig.craigsworks/qtip/1.0/files/25

7
TheAlbear

La structure HTML à laquelle il est fait référence sur le site qTip n'est qu'un exemple du code HTML créé lors de l'utilisation du plugin. Il ne fait pas partie du code qui doit être ajouté à la page pour le faire fonctionner.

2
user527269

Dans ASP.NET, j'ai inclus les jQuery-1.4.2.min.js et jquery.qtip-1.0.js.

Pas de CSS, ça devrait juste marcher.

$(document).ready(function() {
    $("#<%= txtUsername.ClientID %>").qtip({
        content: 'Your registered username',
        style:
    {
        name: 'blue',
        tip: 'leftMiddle'
    },
        position:
    {
        corner:
        {
            target: 'rightMiddle',
            tooltip: 'leftMiddle'
        }
    }
    });
}
2
Pieter Germishuys

Vous pouvez également suivre les instructions sur les forums qTip ici: http://craigsworks.com/projects/forums/thread-solved-qtip-1-0-0rc3-does-not-work-with-latest- jquery-release . En modifiant une ligne de code dans le plugin qTip (bien qu'il soit difficile de trouver le code dans la version 'min'), vous restaurerez la compatibilité avec jQuery.

Fondamentalement, changez:

if(typeof $(this).data('qtip') == 'object')

À:

if(typeof $(this).data('qtip') === 'object' && $(this).data('qtip'))

Cela devrait faire l'affaire; travaillé pour moi.

2
tchaymore