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

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

4 thoughts on “Le tooltip le plus simple pour Jquery”

  1. Sabine says:

    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!

  2. Sabine says:

    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.

  3. Sabine says:

    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

  4. tof says:

    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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *