How to show a table as a tooltip using jQuery?

Question

I have a Gridview populated with data and one of the column contains a Link Button (File List). If I click on the Linkbutton (FileList) a .net event will be fired and a call will be made to the database to retrieve the data.

How to show that data in a HTML table format as a tool-tip as shown in the attached picture? I would like to achieve the tooltip using jQuery.

Answer 1

Simple example:

HTML

<a href="">test</a>
<table>
    <tr><td>asdf</td><td>gsdi</td></tr>
    <tr><td>asdf</td><td>gsdi</td></tr>
</table>

JS

$('a').hover(function(ev){
    $('table').stop(true,true).fadeIn(); 
},function(ev){
    $('table').stop(true,true).fadeOut();
}).mousemove(function(ev){
    $('table').css({left:ev.layerX+10,top:ev.layerY+10});
});

CSS

table{
    display:none;
    position:absolute;
}
td{
    border:1px solid red;   
}

Fiddle demo