How do I make my dynamic tooltip appear above the links in the table, using jQuery?

Question

I have a problem with a tooltip I'm working on.

My 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;
}  

Here is the HTML structure I'm working with:

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

Here is the 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);}); 
    }); 
}

The problem I'm having is making the dynamic tooltip appear above the links in the table relative to the link position?

I've been stuck on this for a while & would really appreciate any help I can get with this, Thanks

Answer 1

The error is in this line:

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

You are refering to all links and when you get .offset() from them, it will choose the first one. You have to get the offset from your current link, like this:

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

You should also have a look at your HTML, it's not valid (you are not closing your <td> s).

You could also move out the mouseout() event, you don't need to rebind it every time. And at last, you can use fadeIn() and fadeOut() instead of animate (they are shorthand functions for animating opacity).

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