Comment faire des info-bulles (avec preview d’image) via jQuery ?

21/05/2008
WebDev et Design Allez aux commentaires

Voici comment faire des info-bulles (tooltip) très facilement grâce à jquery. Avec en plus la possibilité d'y inclure une pré visualisation d'image !

Voici les démo:

  1. Tooltip simple
  2. Tooltip image preview
  3. Tooltip lien avec preview

Installation

1. On inclu la librairie jQuery dans la page (si ce n'est pas déjà fait) entre les balises HTML <head> et </head>

"text/javascript""jquery-latest.pack.js"

2. On inclut les fonctions javascript des tooltip (après jQuery)

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js

span class="coMULTI">/* CONFIG */
               
                xOffset = 10;
                yOffset = 30;
               
                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result
               
        /* END CONFIG */
        $("a.screenshot""""") ? "<br/>""";
                $("body").append("<p id='screenshot'><img src='""' alt='url preview' />"+ c +"</p>");                                                            
                $("#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px""fast""#screenshot").remove();
    }); 
        $("a.screenshot""#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px"/* CONFIG */
               
                xOffset = 10;
                yOffset = 30;
               
                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result
               
        /* END CONFIG */
        $("a.preview""""") ? "<br/>""";
                $("body").append("<p id='preview'><img src='""' alt='Image preview' />"+ c +"</p>");                                                             
                $("#preview")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px""fast""#preview").remove();
    }); 
        $("a.preview""#preview")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px"/* CONFIG */             
                xOffset = 10;
                yOffset = 20;          
                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result            
        /* END CONFIG */               
        $("a.tooltip""";                                                                         
                $("body").append("<p id='tooltip'>""</p>");
                $("#tooltip")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px""fast""#tooltip").remove();
    }); 
        $("a.tooltip""#tooltip")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });                    
};

3. Pour activer les tooltip, on inclut le code suivant:

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js

span class="co1">//active les tooltip simple
        imagePreview();//active les tooltip image preview
        screenshotPreview();//active les tooltip lien avec preview
});

4. Ajouter le code CSS suivant à la fin de votre votre feuille de style

/* css pour la tooltip lien avec preview *//* css pour la tooltip image preview *//* css pour la tooltip normal */

5. Et voici à quoi doit ressembler le code HTML de vos liens

Pour les tooltip normaux (en fait il faut donner une classe "tooltip" aux liens et un "title")

"http://cssglobe.com""tooltip""Web Standards Magazine"Roll over for tooltip

Pour les tooltip image preview (en fait il faut donner une classe "preview" aux liens)

"image.jpg""preview""Great looking landscape"Roll over to preview

Pour les tooltip lien avec preview (en fait il faut donner une classe "tooltip" aux liens et un "rel" contenant l'url de l'image)

"http://www.cssglobe.com""screenshot""cssg_screenshot.jpg""Web Standards Magazine"
Css Globe

Liens

-----

Articles relatifs