31 votes

Comment utiliser jQuery qTip - Exemple simple s'il vous plaît

Vous serais reconnaissant si quelqu'un pouvait pls me montrer un exemple simple d'installation et d'utilisation qTip plugin jquery pour une info-bulle pour un affichage en bas à gauche de l'endroit où j'ai passez la souris sur une image.

J'ai essayé de suivre les démos/exemples sur le site:> qTip , mais juste ne pouvez pas sembler obtenir ce travail.

Je ne suis pas sûr si j'ai besoin d'inclure la Structure HTML de la documentation et, si oui, où dois-je le placer?

Ce plugin ne nécessitent également un fichier CSS de la sorte?

De toute façon, serait vraiment reconnaissant si quelqu'un pouvait expliquer/configuration d'un exemple de l'utilisation de qtip. Apprécierions si je ne suis pas redirigé vers la qTip page de démonstration.

Merci.

19voto

Mike B Points 6275

Je crois que le problème vient d'une incompatibilité entre la nouvelle qTip versions et jQuery.

J'ai passé la dernière heure de tests de code avec qTip pour essayer de trouver pourquoi mon code a refusé de travailler et après avoir cherché dans les forums pour voir si je pouvais trouver des problèmes similaires, j'ai remarqué que le code suivant dans le thread fonctionne parfaitement, mais si c'est remplacée par une version plus récente de jQuery, il se produit 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 depuis le Google Code site et cet exemple fonctionne à la perfection pour moi. Je vais bientôt commencer à adapter ce code à mes besoins pour voir si il y a d'autres problèmes, mais pour ceux qui sont encore en souffrance à ce problème j'espère que ce post est utile.


EDIT: on dirait que C'est un problème d'incompatibilité de version. Ce simple code à partir de la documentation du site fonctionne parfaitement maintenant, avec ces mêmes versions. Espérons que cela est utile pour vous!

<!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 œuvres de sorte qu'il peut être la peine d'attendre pour que, toutefois, si vous souhaitez utiliser qTip avec la dernière version de jQuery, vous pouvez télécharger l'un des nightly builds pour qTip. En utilisant l'exemple ci-dessus, j'ai troqué les deux scripts pour la dernière jQuery (1.4.2) avec la dernière nightly build et il semble fonctionner.

7voto

TheAlbear Points 2324

Je pense que je sais ce que vous êtes après quelque chose qui montre juste comment fixer le qTip pour le html, il y a des exemples ne sont pas les bons.

L'exemple ci-dessous montre la qTip hors d'une image et de montrer le bout de la stabiliser et à droite de l'image, dans un joli deux tons de vert.

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

Sur chose à noter, c'est que je suis en utilisant jquery 1.4.2, cela ne fonctionne pas avec la normale de téléchargement 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/fichiers/25

2voto

Pieter Germishuys Points 3482

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

2voto

tchaymore Points 1169

Vous pouvez également suivre les instructions à l'qTip forums 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 qTip plugin (même si il est difficile de trouver le code dans le " min " version), vous pourrez récupérer la compatibilité avec jQuery.

Fondamentalement, le changement:

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

Pour:

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

Que devrait faire l'affaire, a travaillé pour moi.

2voto

user527269 Points 21

La structure HTML à laquelle on 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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X