Wie mache ich meinen dynamischen Tooltip über die Links in der Tabelle mit jQuery?

Question

Ich habe ein Problem mit einem Tooltip, an dem ich gerade arbeite.

Meine CSS:

#MyAuction-BidHistory { 
    position:absolute; 
    margin-left:346px; 
    z-index:400;  
    background-color:rgba(0, 0, 0, 0.8); 
    -moz-border-radius:4px; 
    -webkit-border-radius:4px; 
    width:217px; 
} 

Hier ist die HTML-Struktur mit Ich arbeite:

<div id="MyAuction-BidHistory"></div> 

    <table> 
    <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16141, this);">1</a><td></tr> 
    <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16149, this);">2</a><td></tr> 
    <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16143, this);">3</a><td></tr> 
    <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16144, this);">4</a><td></tr> 
    <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16132, this);">5</a><td></tr> 
    <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16165, this);">6</a><td></tr> 
    </table> 

ist die JavaScript/JQuery:

function myBidHistory(pListedPlatesId, pObj) { 

    var d = new Date(); 
    var t = d.getTime();   
    $.get('/auction/includes/new-bidhistory.asp?lplateid=' + pListedPlatesId + "&xx=" + t, function(data){ 

     var linkOffset = $('a.my-auction-history').offset().top; 

     $('#MyAuction-BidHistory').html(data).css({'display':'block', 'opacity':'0', 'top':linkOffset}).animate({opacity:1}, 200); 
     $('a.my-auction-history').mouseout(function(){$('#MyAuction-BidHistory').animate({opacity:0}, 200);}); 
    }); 
} 

Das Problem I‘ m macht, dass der dynamische Tooltip über den Links in der Tabelle relativ zur Linkposition erscheint?

Ich habe auf diese für eine Weile aufgeklebt & wirklich jede mögliche Hilfe schätzen würde ich mit diesem bekommen, Dank

Answer 1

Der Fehler in dieser Zeile ist:

var linkOffset = $('a.my-auction-history').offset().top; 

Sie sind alle beziehe Links und wenn Sie .offset() von ihnen bekommen, wird es die erste wählen. Sie haben den Offset von der aktuellen Verbindung, wie diese zu erhalten:

var linkOffset = $(pObj).offset().top; 

Sie auch einen Blick auf Ihre HTML haben sollte, ist es nicht gültig ist (Sie Ihre <td> s nicht schließen).

Sie können auch das Ereignis mouseout() verschieben, Sie müssen es nicht jedes Mal neu binden. Und zuletzt können Sie fadeIn() und fadeOut() anstelle von animieren (sie sind Kurzfunktionen zum Animieren der Deckkraft).

Beispiel:http://jsfiddle.net/sD9Uy/1/