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

21/05/2008
Web Développement 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>

<script type="text/javascript" src="jquery-latest.pack.js"></script>

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

this.screenshotPreview = function(){   
        /* 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").hover(function(e){
                this.t = this.title;
                this.title = "";       
                var c = (this.t != "") ? "<br/>" + this.t : "";
                $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");                                                                
                $("#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");                                               
    },
        function(){
                this.title = this.t;   
                $("#screenshot").remove();
    }); 
        $("a.screenshot").mousemove(function(e){
                $("#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });                    
};
this.imagePreview = function(){ 
        /* 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").hover(function(e){
                this.t = this.title;
                this.title = "";       
                var c = (this.t != "") ? "<br/>" + this.t : "";
                $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                                                
                $("#preview")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");                                               
    },
        function(){
                this.title = this.t;   
                $("#preview").remove();
    }); 
        $("a.preview").mousemove(function(e){
                $("#preview")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });                    
};
this.tooltip = function(){     
        /* 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").hover(function(e){                                                                                        
                this.t = this.title;
                this.title = "";                                                                         
                $("body").append("<p id='tooltip'>"+ this.t +"</p>");
                $("#tooltip")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");               
    },
        function(){
                this.title = this.t;           
                $("#tooltip").remove();
    }); 
        $("a.tooltip").mousemove(function(e){
                $("#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

$(document).ready(function(){
        tooltip();//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 */
#screenshot{
        position:absolute;
        border:1px solid #ccc;
        background:#333;
        padding:5px;
        display:none;
        color:#fff;
}
/* css pour la tooltip image preview */
#preview{
        position:absolute;
        border:1px solid #ccc;
        background:#333;
        padding:5px;
        display:none;
        color:#fff;
}
/* css pour la tooltip normal */
#tooltip{
        position:absolute;
        border:1px solid #333;
        background:#f7f5d1;
        padding:2px 5px;
        color:#333;
        display:none;
}

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

<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

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

<a href="image.jpg" class="preview" title="Great looking landscape">Roll over to preview</a>

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)

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

Liens

-----

Articles relatifs

  1. Clo
    22/05/2008 à 21:12 | #1
    Répondre | Citer

    Je ne pense pas pouvoir utiliser ça sur ma plate-forme d’ hébergement.
    Merci quand mème :)

  2. hester_le_ver_de_terre
    04/06/2008 à 18:19 | #2
    Répondre | Citer

    Bonjour,

    Est-il possible de fixé l’infobulle pour pouvoir par exemple cliquer sur un lien dans celle-ci ?

    Merci

  3. Sonnstn!x
    28/07/2008 à 00:32 | #3
    Répondre | Citer

    Salut !

    Bon, moi j’ai adoré ce script… un des plus simples à utiliser. Sauf que ! Ca ne passe plus depuis l’installation d’un plugin tiers (un badge Flikr). jQuery & Prototype, c’est un peu comme Alpah Blondy & Tiken Jah Fakoly… Ils ne s’aiment pas. Mais alors pas du tout ! Et moi, je suis trop « simple » pour comprendre comment utiliser la fonction « no conflict » (histoire de changer l’appel du $ en celui d’autre chose, je crois) de jQuery…

    Serait-il possible d’avoir un « tuto-pour-les-nuls » ?

    De toutes façons, merci !

  4. volkanic
    18/12/2008 à 19:21 | #4
    Répondre | Citer

    Salut,
    on peut utiliser ce script sur une liste déroulante ?.

  5. sylvain
    03/07/2009 à 09:28 | #5
    Répondre | Citer

    Apres une semaine de galere a essayer de faire marcher un truc dans le genre, bon tuto, ca marche bien, c’est beau. Fantastique.

  6. lea
    13/07/2009 à 11:55 | #6
    Répondre | Citer

    Est il possible que le  » Tooltip lien avec preview » soit active quand on click et non pas au passage de la souris ?
    Si oui comment faie svp ?

  7. OLIVIER
    29/10/2009 à 11:57 | #7
    Répondre | Citer

    Le souci avec ton script, c’est que lorsque les photos sont en bordure de page, la preview sort de la page car elle ne se repositionne pas soit à gauche, soit à droite de la miniature, pour être toujours dans la page.

    Second souci, c’est que le lien pointe obligatoirement vers l’agrandissement de la photos, et pas vers un autre lien (fiche d’une hôtel par exemple). Il faudrait pouvoir afficher une preview sans être obligé de pointer le lien vers l’agrandissement de la photo.

    Donc, peu utilisable en production, même si le rendu est sympa

  8. florinda
    05/02/2010 à 10:39 | #8
    Répondre | Citer

    super ce script, mais quand je le place dans un div en position absolue , l’info bulle se met derrière mon div , comment la placer par dessus.

    merci

  9. Toy
    21/07/2010 à 10:37 | #9
    Répondre | Citer

    Très beau script.
    Aucu souci avec Firefox et IE8.
    Dommage, il semble ne pas être compatible avec IE6 et IE7 (rien ne s’affiche).
    Si qq’un a la solution, je suis preneur.

  10. Capi_jupi
    13/01/2011 à 10:43 | #10
    Répondre | Citer
  1. 25/05/2008 à 20:00 | #1
    Qu’est ce qui m’a intéressé cette semaine | Sur le fil technologique
  2. 30/08/2008 à 20:16 | #2
    Nova’s Blog » Blog Archiv » JQuery Tutorials für Einsteiger
  3. 30/01/2009 à 09:06 | #3
    How to: Create a fancy image gallery with JQuery
  4. 07/08/2009 à 06:17 | #4
    3 Semplici ed utili tutorial per jQuery :: Dynamick
  5. 23/10/2009 à 12:47 | #5
    Petite sélection de plugin JQuery | Le Blog de Kanon