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

21/05/2008

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:

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>

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

Clo

Je ne pense pas pouvoir utiliser ça sur ma plate-forme d’ hébergement.
Merci quand mème 🙂
Pingback: Qu’est ce qui m’a intéressé cette semaine | Sur le fil technologique()
hester_le_ver_de_terre

Bonjour,

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

Merci
Sonnstn!x

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 !
Pingback: Nova’s Blog » Blog Archiv » JQuery Tutorials für Einsteiger()
volkanic

Salut,
on peut utiliser ce script sur une liste déroulante ?.
Pingback: How to: Create a fancy image gallery with JQuery()
sylvain

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

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 ?
Pingback: 3 Semplici ed utili tutorial per jQuery :: Dynamick()
Pingback: Petite sélection de plugin JQuery | Le Blog de Kanon()
OLIVIER

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
florinda

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
Toy

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

@OLIVIER Il est possible que le lien pointe vers le site que l’on veut en utilisant le tooltip : lien avec previex et en mettant une image dans le lien
brady

Salut , d’abord merci à toi pour ton aide précieuse, ensuite je voulais te signaler quand même un petit soucis au niveau de ton script de toolTip simple, tu inverses le yOffsetet le xOffset.
(je cite ton code :
.css(« top »,(e.pageY – xOffset) + « px »)
.css(« left »,(e.pageX + yOffset) + « px »)
)

Bonne continuation, Brady 😉
Pingback: How to: Create a fancy image gallery with JQuery | Teach YourSelf()
Pringles

Salut tous le Monde , et Joli Travails les amis
j’ai une qestion qui conserne Le » Tooltip image preview »
Exemple : 02

je veux quand je Click sur l’image redirige moi ver un site et n’affiche pas l’image comme dans l’exemple donné .

Moi j’ai une ide de faire une petite logo , quand je passe la sourie >> une sreen shot s’affiche dans » Preview » , mai quand je click sur le logo >>> il redirege vers un URL ex: http://www.google.com

J’attends