Faire des info-bulles (avec ou sans miniature) via jQuery

4 déc 2008

Faire des info-bulles (avec ou sans miniature) via jQuery

Auteur: aDy | Classé dans: Tutos jQuery

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 !

Exemples d'info-bulles (avec preview d'image) via jQuery

Exemples d'info-bulles via jQuery

Voici les 3 démos en ligne :

Installation :

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

<script src="jquery-latest.pack.js" type="text/javascript"><!--mce:0--></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 != "") ? "
" + this.t : "";
                $("body").append("
 
<img src="&quot;+ this.rel +&quot;" alt="url preview" />"+ c +"
 
");
                $("#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 != "") ? "
" + this.t : "";
                $("body").append("
 
<img src="&quot;+ this.href +&quot;" alt="Image preview" />"+ c +"
 
");
                $("#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("
 
"+ this.t +"
 
");
                $("#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 class="tooltip" title="Web Standards Magazine" href="http://cssglobe.com">Roll over for tooltip</a>

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

<a class="preview" title="Great looking landscape" href="image.jpg">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 class="screenshot" title="Web Standards Magazine" rel="cssg_screenshot.jpg" href="http://www.cssglobe.com">Css Globe</a>

Ressources :

Liens :

Tags : css, info-bulles, javascript, jquery, thumbnail, tooltip

Article posté le Jeudi 4 décembre 2008 à 14:46.
Classé dans la catégorie Tutos jQuery.

3 commentaires pour “Faire des info-bulles (avec ou sans miniature) via jQuery”

Uz! a dit:
13 décembre, 2008 à 19:15 Mozilla Firefox 2.0.0.18 Windows XP
Erf mais pourquoi diable ne m’as-tu pas fais parvenir cette news plus tôt ? cela nous aurait vraiment évité de nous prendre la tête avec des .js bancaux !
De Kens a dit:
19 octobre, 2009 à 16:45 Safari 531.9 Mac OS X
Bonjour,
Je test ce code dans une boucle php mais ca fonctionne pas, peut tu m’aider. Merci
links for 2009-10-26 « Ikan66 a dit:
26 octobre, 2009 à 17:08 WordPress MU
[...] Faire des info-bulles (avec ou sans miniature) via jQuery | Webady le Blog (tags: jquery) [...]