Tutoriel vidéo jQuery : Infobulle avec jQuery

Tutoriel jQuery

Dans ce tutoriel vidéo vous apprendrez à utiliser jQuery pour réaliser des infobulles animée sur vos liens. Le principe du script sera d'utiliser l'attribut "title" des liens afin de définir le contenu des infobulles...

Démonstration

Tags : JqueryJavascriptInfobulles

Tutoriel jQuery posté Lundi 11 Janvier 2010
 56 Commentaires
Ils l'ont utilisé
Vos commentaires
Laisser un commentaire

MyKiwi (Lundi 11 Janvier 2010 à 16:15):

Jolie !

Badbart (Lundi 11 Janvier 2010 à 16:16):

Enfin une info bulle avec un minimum de style

Ph3nol (Lundi 11 Janvier 2010 à 16:28):

Encore une fois, du très bon travail ! Merci

legendary (Lundi 11 Janvier 2010 à 16:54):

merciii !

Ritter jack (Lundi 11 Janvier 2010 à 17:35):

Très bon comme d'habitude !

Merci à toi

darkavatars (Lundi 11 Janvier 2010 à 18:01):

Bien comme tuto sa sera très utile

rom07 (Lundi 11 Janvier 2010 à 18:57):

Bravo, super pratique et joli en plus.

Merci beaucoup ! =)

Rapha (Lundi 11 Janvier 2010 à 19:18):

Merci, parfait comme toujours

A ce rythme là on va avoir 5-6 tutos par semaine Woah ! :;

Baptiste (Lundi 11 Janvier 2010 à 19:31):

Nickel Jonathan! je venais de poser la question en plus sur le tuto webdesign! :p
Très réactif! on attend le méga tuto sur WP par contre! ça avance? lol

Bravo et merci!

Grafikart (Lundi 11 Janvier 2010 à 20:00):

Héhé no soucy, pour le tutoriel wordpress ça va arriver je fais le code une fois avant de le présenter en tutoriel et c'est assez long...

Baptiste (Lundi 11 Janvier 2010 à 20:11):

Ouais j'imagine! C'est du gros boulot! et toi tu n'as pas de tutoriel pour t'aider! lol
Sinon pourrais tu faire un tuto css sur les boutons flexibles (avec des images en background j'entends)? ça doit se faire rapido non ?

@+

cerise (Lundi 11 Janvier 2010 à 20:44):

Bizarre chez moi la vidéo n'est presque pas visible?
Suis-je la seule à avoir ce problème?

Merci de me répondre

Badbart (Lundi 11 Janvier 2010 à 20:56):

Non ça me fait pareil pour cette vidéo, avec Media Player Classic ça merde, obliger de la lire avec un autre lecteur. Rien de bien grave remarque.

cerise (Lundi 11 Janvier 2010 à 21:06):

Merci beaucoup Badbart
j'ai essayer avec VLC media player.... et VHPlayer.....
finalement c'est Quick time qui l'emporte la vidéo est parfaite pour moi
encore merci à toi

Grafikart (Mardi 12 Janvier 2010 à 11:51):

La vidéo est au format MP4 et le site vous faisait télécharger un .mov, ce qui semble expliquer votre problème. Maintenant c'est corriger le fichier se télécharge au bon format. Si vous pouviez me confirmer que cela fonctionne chez vous aussi

Badbart (Mardi 12 Janvier 2010 à 12:36):

Chez moi ça reste écran noir + son ok. Mais ça ne fait rien.
Tu as du changer un truc dans l'encodage, si tu veux a tout prix réglé le problème voila des infos :


Complete name : Grafikart - Tutoriel Focus - Blur.mov
Format : MPEG-4
Format profile : QuickTime
Codec ID : qt
File size : 80.5 MiB
Overall bit rate : 1 263 Kbps
Writing library : Apple QuickTime

--------------------------------

Complete name : Grafikart - Tutoriel Infobulle avec jQuery.mp4
Format : MPEG-4
Format profile : Base Media / Version 2
Codec ID : mp42
File size : 102 MiB
Overall bit rate : 921 Kbps


La 1ere marche bien, la deuxième non (dans les 2 version). Parement tu as changer le codec.
Je le répète c'est pas la mort ^^ Efface le com une fois lu, car il est un peu gros.

PiGi (Mardi 12 Janvier 2010 à 11:43):

Arf, ce script semble incompatible avec Firefox (3.5.7) Mac OS (10.5.8) :-(
Marche très bien sur Safari sinon.

Baptiste (Mardi 12 Janvier 2010 à 12:08):

J'ai exactement la même configuration et ça marche nickel!!

PiGi (Mardi 12 Janvier 2010 à 15:05):

Mouai, doit y avoir un conflit avec un module ou autre, j'ai Firebug qui ne marche plus très bien non plus… Vais faire un petit nettoyage ;-)

Rapha (Mardi 12 Janvier 2010 à 17:17):

J'ai firebug 1.4.5 et Firefox 3.7 sous Vista ça marche super :/

PiGi (Mardi 12 Janvier 2010 à 11:45):

Je précise (sur FF Mac) : La bulle n'apparaît qu'après un clic et bug en plus (vibration verticale)…

cerise (Mardi 12 Janvier 2010 à 13:05):

J'ai re télécharger la vidéo.....mais le problème reste le même
C'est la première fois que cela arrive je n'ai jamais eu aucun problème avec les autres vidéos elle sont nickels
Merci d'avoir répondu

Grafikart (Mardi 12 Janvier 2010 à 16:34):

Je voulais tester un nouvel encodage permettant de réduire la taille avec une perte de qualité minimale, mais je pense qu'on va rester sur l'ancien du coup

Franck55 (Mardi 12 Janvier 2010 à 13:47):

Salut,

Pour même constat, vu avec opéra très flou on ne voit pas les détails et si je télécharge la vidéo c'est pire l'image lague à fond!
Dommage, merci tout de même pour ton super boulot comme d'hab!!

Shaion (Mardi 12 Janvier 2010 à 15:12):

Moi tout est niquel !

Iguanes (Mardi 12 Janvier 2010 à 18:44):

pas mal du tout !

PiGi (Mardi 12 Janvier 2010 à 22:20):

J'ai trouvé : c'est SmartScroll ( http://www.marcmoini.com/sx_en.html ) qui mettait le binz !

Alex (Jeudi 14 Janvier 2010 à 06:46):

Merci, c'est très pratique ce genre d'astuce !

Loïc (Vendredi 15 Janvier 2010 à 14:22):

Salut et merci pour ce tuto très intèressant.

Qu'elle logiciel utilise tu pour coder ?

Ly3s (Vendredi 15 Janvier 2010 à 16:06):

Merci pour le tutoriel

@Loïc: Il utilise comme moi, Komodo Edit (Tourne sous Linux et Merdows), je te le conseil vivement :D

Vic (Lundi 18 Janvier 2010 à 15:17):

Salut et merci pour ce tuto !
J'ai juste un petit soucis au niveau de l'alignement de la bulle (elle ce décentre vers la gauche dés que le texte devient un peu "long" ?)
quelqu'un a-t-il le même soucis que moi ?
je pense que ça vient de cette ligne (qui parait pourtant bonne):
var posLeft = $(this).offset().left+$(this).width()/2-bulle.width()/2;
quelqu'un aurait il une idée pour la remplacer ?!
Merci

Vic (Lundi 18 Janvier 2010 à 16:46):

Bon bin ça fonctionne maintenant ?! j'ai juste changé le premier /2 par un *0.5 ...
zouuuu !

Legendary (Mardi 19 Janvier 2010 à 17:45):

si on s'excite un peu sur les infosbulles, sur tous les autres liens, une infobulle apparait... normal ? même ceux dans ton exemple grafikart !

Skans (Mercredi 17 Février 2010 à 14:01):

+1 pour ce probleme, assez embêtant dans certain cas.

bagheera58 (Mercredi 18 Août 2010 à 15:17):

Bonjour, quelqu'un a trouvé une solution à ce problème?

Nibdok (Mardi 19 Janvier 2010 à 22:21):

Salut,
j'aurais une question assez simple je pense (mais pour quelqu'un s'y connaissant en jquery/javascript) : J'aimerais garder le principe d'affichage de ces infobulles mais j'aimerais que les infobulles s'affichent toutes au même endroit sur la page, plus précisément sous une liste de liens qui au fur et à mesure du temps risque de s'allonger...
est-ce possible?
Si jamais vous avez la possibilité de me donner une réponse merci d'avance et encore merci pour tous ces tutoriaux qui sont déjà d'une grande aide.

PS : j'ai créé un compte avec ce pseudo(nibdok) or lorsque je suis connecté il m'est impossible de poster des commentaires... T_T

Grafikart (Mercredi 20 Janvier 2010 à 01:54):

Pour ton souci de commentaire connecte toi à ton compte et édite le lien de ton "site" pour le laisser vide ou pour y mettre le lien de ton site web.

Sinon pour ton souci j'ai pas trop compris la question. Si tu veux que l'infobulle reste à un point fixe il faut que tu change la partie du tutoriel ou on positionne la bulle dynamiquement pour la positionner où tu le veux.

Nibdok (Mercredi 20 Janvier 2010 à 17:08):

Nickel plus de problème pour mettre un commentaire... merci
Pour essayer de vous expliquer ça un peu mieux : j'ai une div dans laquelle apparaissent des icones 30*30px (environ 5 icones par ligne). Ces icones permettent à l'utilisateur de voir mes sites amis et/ou que j'apprécie (ouais c'est des liens, dis comme ça c'est plus rapide mais vous reconnaitrez que c'est nettement moins de suspense pour le lecteur... bref).
Et en fait sous ces lignes d'icones, lorque l'on passe sur une icone apparait l'infobulle. Or j'aimerais que toutes les infobulles apparaissent exactement au même endroit. Or le souci étant d'après ce que j'ai compris en regardant le tutoriel, c'est qu'en jquery, cela donne une position absolue à une infobulle mais pas à l'ensemble.
De plus si au fur et à mesure que j'ajoute des icones je dois modifier à la main la position de mon infobulle ça risque d'être délicat ^^

J'espère que je me suis fait mieux comprendre et encore merci d'avance pour votre réponse.

Bonne journée et continuez comme ça

Badbart (Mercredi 20 Janvier 2010 à 19:09):

Dans ce cas la fait une div qui ce remplie au survol d'un lien.

Nibdok (Jeudi 21 Janvier 2010 à 12:06):

ok je vais essayer ça
merci.

cruchovic (Jeudi 21 Janvier 2010 à 16:18):

Salut j'ai fais un test avec une bulle transparent (.png) et ça fonctionne nickel sous FF, Chrome et un léger décalage (pas gênant) sous Opéra...
Par contre sous IE(8) que du caca... plus du tout d'opacité (soucis récurant liés à l'utilisation de .png sous ce navigateur), décalage de fou, bugg...Quelqu'un aurait-il une solution ?
Merki !

cruchovic (Jeudi 21 Janvier 2010 à 16:26):

Nickel sous Safari;)

Momox (Dimanche 31 Janvier 2010 à 16:28):

Merci beaucoup pour tes tutoriels. Grâce à toi j'ai compris pas mal de choses à jQuery.

Xeron (Jeudi 18 Février 2010 à 14:20):

J'arrive pas à adapter les infos-bulles à mes liens ayant un titre :/

Baptiste (Jeudi 18 Février 2010 à 17:43):

C'est à dire? tu es est ou dans ton code?

Baptiste (Jeudi 18 Février 2010 à 21:14):

Salut,
pourrais t on faire pareil, mais sur le côté! mais pas au dessus.... j'ai pas encore compris les calculs, j'arrive pas à refaire!!

++

PS: à gauche car c'est un menu collé à droite

dorso (Mardi 23 Février 2010 à 18:11):

Merci bcp pour ce tuto de qualité.

Danomagico (Vendredi 26 Février 2010 à 17:26):

Bonjour!

J'utilise ce système d'infobulles pour mon thème WordPress et j'ai un petit souci. J'applique mes infobulles à des images. L'infobulle apparait correctement, puis, quand je quitte l'image, le title ne se renouvelle pas ou alors, il se met sur le lien qui englobe l'image... Auriez-vous la solution à ce problème?

Merci d'avance!

Evy (Vendredi 26 Mars 2010 à 05:42):

Baptiste ca n'est pas tres difficile si tu ecoutes bien les commentaires... MERCI encore pour ce tuto superbe!!

sqDQQ (Samedi 27 Mars 2010 à 05:58):

Q

Alwin (Samedi 27 Mars 2010 à 15:31):

Excellent tutoriel comme d'habitude !
Par contre, j'ai un soucis avec le script sous FF 3.6.

J'ai deux liens cote à cote et lorsque je passe de l'un à l'autre, la ligne $(this).attr("title",bulle.text()); ajoute le titre sur les deux liens ... C'est étrange.

fef06 (Samedi 27 Mars 2010 à 17:51):

Bonjours a tous,
j'aimerai savoir comment on fait pour avoir une infobulle sur plusieurs "étage" comme si on ferai un <br /> ???

bibips (Dimanche 01 Août 2010 à 14:33):

En effet je me pose la même question que toi !
Peut-on mettre de l'HTML (voir du PHP) dans l'infobulle ?

hico (Vendredi 09 Avril 2010 à 02:24):

Bonjour et merci bien pour ce tuto, décidément ce site est un réel + pour apprendre !

C'est bien komodo edit que tu utilises non ?
Si oui, quelle version ? Je n'ai pas le même template, et je n'ai pas vu dans les options.

Merci bien

Houly62 (Dimanche 11 Avril 2010 à 22:27):

Merci beaucoup pour ce tuto !

Vérifiez bien que votre fichier javascript et bien lié à votre code, car moi je ne l'avez pas bien fait (mon arborescence n'étais pas bien écrite).

Maintenant tout est GOOD !

Xeron (Samedi 07 Août 2010 à 18:36):

Coment peut-on intégrer ce style d'info bulle sur Wordpress ? :S

 

Ajouter un commentaire

Si vous rencontrez un problème avec votre code et que vous avez une question spécifique utilisez plutôt les questions pour avoir une réponses rapide.

Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel