Bug infobulle jQuery (Tuto du site)

jeranders
Javascript

Bonjour à tous, je me permet de poster ici concernant un bug d'affichage après avoir suivis le tuto "infobulle jquery"

[img]http://uprapide.com/image/299382-bug_169[/img]

Balise img fonctionne pas :(

[url=http://uprapide.com/image/299382-bug_169]L'image[/url]

Voila, si je passe rapidement sur les liens en "1", je risque de me retrouver avec le title d'un des liens sur le titre "2" alors que je n'ai pas de title dessus...

Après quand je passe sur le nom de l'auteur "3", pas de problème sauf que l'infobulle ce met sur le lien (de même pour les autres liens).

Voici le code JS

bulle.js
[code]// Script Grafikart http://www.grafikart.fr/tutoriels/jquery/infobulle-jquery-95 <3
$(function(){

$("a").mouseover(function(){
    if($(this).attr("title")=="") return false;

    $("body").append('<span class="infobulle"></span');
    var bulle = $(".infobulle:last");
    bulle.append($(this).attr("title"));
    $(this).attr("title","");
    var posTop = $(this).offset().top-$(this).height();
    var posLeft = $(this).offset().left+$(this).width()/2-bulle.width()/2;
    bulle.css({
        left:posLeft,
        top:posTop-10,
        opacity:0
    });
    bulle.animate({            
        top:posTop,
        opacity:0.99
    });
});

$("a").mouseout(function(){
    var bulle = $(".infobulle:last");
    $(this).attr("title",bulle.text());
    bulle.animate({            
        top:bulle.offset().top+10,
        opacity:0
    },200,
    "linear",
    function(){
        bulle.remove();
    });        
});

});[/code]

Le HTML

Article:

[code]<article> <img src="images/1.jpg" alt="" class="thumb" />
<p><a href="#" class="title">This is the title of a news article</a></p>
<p class="infoarticle">Auteur <a href="#" title="Admin numéro 1">Admin</a> <br/>Le 18/04/2012 - 24 commentaires</p>
<p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
</article>[/code]

Menu droite

[code] <div class="tab_container">
<div id="tab1" class="tab_content">
<h3>Article</h3>
<ul>
<li><a href="#" title="1">Interesting Recent Link 1</a></li>
<li><a href="#" title="2">Interesting Recent Link 2</a></li>
<li><a href="#" title="3">Interesting Recent Link 3</a></li>
<li><a href="#" title="4">Interesting Recent Link 4</a></li>
<li><a href="#" title="5">Interesting Recent Link 5</a></li>
<li><a href="#" title="">Interesting Recent Link 6</a></li>
<li><a href="#" title="">Interesting Recent Link 7</a></li>
</ul>
</div> [/code]

Je suis pas très bon en JS et jQuery, mais d'après le tuto, l'infobulle ce met par rapport au lien avec le $(this) ?

Merci d'avance pour votre aide !

Aucune réponse