如何使用jQuery使動態工具提示顯示在表中的鏈接上方？

Question

我正在使用的工具提示有問題。

我的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;
}  

這是我正在使用的HTML結構：

<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>

這是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);}); 
    }); 
}

我遇到的問題是使動態工具提示出現在表格中相對於鏈接位置的鏈接上方？

我已經堅持了一段時間，非常感謝我能為此提供的任何幫助，謝謝

Answer 1

錯誤在這一行：

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

您引用的是所有鏈接，當您從中獲得.offset（）時，它將選擇第一個。 您必須從當前鏈接獲取偏移量，如下所示：

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

您還應該查看一下HTML，它是無效的（您沒有關閉<td> ）。

您也可以移出mouseout()事件，不需要每次都重新綁定它。 最后，您可以使用fadeIn（）和fadeOut（）代替動畫（它們是動畫不透明度的簡寫函數）。

示例： http ： //jsfiddle.net/sD9Uy/1/