Le tooltip le plus simple pour Jquery
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
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(""+ c +"
Ma modification:var imgprev = this.src;
$("body").append(""+ c +"
Ainsi je n’ai qu’à placer le code html suivant dans ma page:
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
Bonjour,
Je cherche désespérément ce script depuis des mois. Je ne comprends pas, ton script à l’air nickel, j’ai fait exactement comme tu le dis, et ça ne fonctionne pas!!!
J’ai testé 2 versions,
http://www.lisarts.fr/02/index2.html
http://www.lisarts.fr/02/
et dans main.js j’ai mis :
$(« a.preview »).hover(function(e){
this.t = this.title;
this.title = « »;
var c = (this.t != « ») ? « » + this.t : « »;
var imgprev = this.src;
$(« body »).append(« »+ c + » »);
$(« #preview »)
Sais-tu pourquoi ça ne fonctionne pas ?
Merci en tout cas, si ton script marche, il est top!
Le code au-dessus (mon précédent message) je ne sais pas pourquoi il ne s’est pas collé correctement, j’ai peut-être effacé sans faire attention, bref
dans mon .js j’ai :
var imgprev = this.src;
$(« body »).append(« »+ c + » »);
$(« #preview »)
Encore merci.
Zut, c’est lui qui bouffe le code, il le prend pour du vrai html, en tout cas dans ma page mon code est correct, si tu as firefox, je pense que tu sais que tu peux afficher la source du .js dans le navigateur.
re-encore merci
Désolé, j’étais un peu hors du temps ces derniers mois.
Je viens de voir sur ton site que tu t’en était sortie: http://www.lisarts.fr/fichiers/librairie.php