jquery show div à côté du tag

Question

Quelqu'un peut-il m'aider? Je suis nouveau à jquery et je suis coincé sur quelque chose qui semble trop simple. Désolé si c'est un republier mais je n'ai pas pu trouver ce que je cherchais.

J'ai 2 liens sur une page et lorsque vous passez la souris sur l'un des liens, vous affichez une division correspondante à côté du lien. Comme une fenêtre de dialogue. Heres ce que j'ai, s'il vous plaît laissez-moi savoir ce que je fais mal ..

le code:

function Show(id) 

{

var pos = $("a#88" + id).offset();  
    var eWidth = $("a#88" + id).outerWidth(); 
    var mWidth = $("div#99" + id).outerWidth(); 
    var left = (pos.left + eWidth - mWidth) + "px"; 
    var top = pos.top + "px"; 


    //alert(left + ' ' + top); 


    $('div#99'+id).css("top", top); 
    $('div#99'+id).css("left", left); 
    $('div#99'+id).css("position", "fixed"); 


    $('a:Tip').hover(  
    function($e) { $('div#99'+id).slideDown(500); },   
    //function($e) { }, 
    function($e) { $('div#99'+id).slideUp(500); } 
); 

}

code html:

<a href="#" id="88123456" class="Tip" onmouseover="Show(123456);">Some Title Text</a> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<a href="#" id="88456789" class="Tip" onmouseover="Show(456789);">Some Title Text2</a> 
<br /> 
<div id='99123456' title="hello" style="display:none;"> 
    something here;99123456 

</div> 

<div id='99456789' title="hello" style="display:none;"> 
    something here;99456789 

</div> 

Merci

Answer 1

Peut être est-ce ce que vous cherchez

<script type="text/javascript"> 
$().ready(function(){ 

    $('a.Tip').hover(function(){ 

    var link = $(this); 
    var dialog = link.next('div'); 

    dialog.css("top", link.position().top); 
    dialog.css("left", link.position().left + link.width()); 
    dialog.css("position", "fixed"); 

    dialog.slideDown(500); 
    }, 

    function() { 
    $(this).next('div').slideUp(500); 
    }); 

}); 

</script> 

<a href="#" class="Tip" >Some Title Text</a> 
    <div title="hello" style="display:none;"> 
    something here;99123456 
</div> 
<br /> 
<a href="#" class="Tip" >Some Title Text2</a> 
<div title="hello" style="display:none;"> 
    something here;99456789 
</div> 

Answer 2

Pourquoi ne pas utiliser simplement

$('a.Tip').hover(function() { 
     $(this).next().slideToggle(); 
    });