jQuery를 사용하여 테이블을 툴팁으로 표시하는 방법은 무엇입니까?

Question

데이터가 채워진 Gridview가 있고 열 중 하나에 링크 단추 (파일 목록)가 있습니다. Linkbutton (FileList)을 클릭하면 .net 이벤트가 발생하고 데이터베이스를 호출하여 데이터를 검색합니다.

첨부 된 그림과 같이 HTML 표 형식의 데이터를 툴팁으로 표시하는 방법은 무엇입니까? 나는 jQuery를 사용하여 툴팁을 얻고 싶다.

Answer 1

간단한 예 :

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