Voici un script/plugin pour jquery vraiment très léger et très simple à mettre en place pour créer des « tooltip » (alias des info-bulles en français).

Easiest Tooltip and Image Preview Using jQuery

Jquery Easiest Tooltip

Voilà ci-dessus en image l’utilisation concrète que j’en ai eu, afin de mettre en valeur des petits logos de partenaires (vraiment trop rikiki) en bas de page d’un site web.
En passant la souris sur le logo, celui-ci s’affiche en plus grand et donc plus visible.

Je ne souhaitais pas utiliser la technique de prendre l’url du lien dans la balise a href= (afin de conserver la possibilité de faire un lien externe sur l’image), aussi il m’a suffit de changer un peu le script pour que celui-ci aille chercher l’adresse issue de la source de l’image et utilise une seconde image alternative pour l’info-bulle:

Extrait du code original:
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");

Ma modification:
var imgprev = this.src;
$("body").append("<p id='preview'><img src='"+ imgprev.replace("mini","big") +"' alt='Image preview' />"+ c +"</p>");

Ainsi je n’ai qu’à placer le code html suivant dans ma page:
<img src="mini-image.png" />
et l’info-bulle affichera l’image « big-image.png »
C’est standard, propre et transparent au niveau du code HTML.

Il ne me reste alors qu’à stocker deux versions de mon image sur le serveur une « mini » et une « big » et d’appliquer quelques mises en forme dans la feuille de style.

Note: j’ai utilisé comme logo juste pour cet exemple un symbole ostentatoire du Pastafarisme avant de mettre le site en ligne.

Rappel du lien: Easiest Tooltip and Image Preview Using jQuery
Trouvé via Webappers