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

Écrit par aDy. Posté 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 :

Mots-clefs : , , , , ,

Rétrolien depuis votre site.

Commentaires (4)

  • Uz!

    |

    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 !

    :P

    Répondre

  • De Kens

    |

    Bonjour,
    Je test ce code dans une boucle php mais ca fonctionne pas, peut tu m’aider. Merci ;)

    Répondre

  • dapimp

    |

    Bonjour à tous !
    Moi j’ai un soucis avec cette source…
    Elle fonctionne très bien sauf que quand je clique sur un lien et que je retourne en arrière, l’image screenshot indique n’importe quoi! Quelqu’un à t’il déjà rencontré ça?

    Répondre

Laisser un commentaire

Ce site utilise KeywordLuv, pour en profiter : Entrez VotreNom@VotreMotClé dans le champ Nom.
Merci d'être constructif, d'éviter les messages trop courts et sur-optimisés sous peine de ne pas être publiés.

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg