如何使用jQuery将表格显示为工具提示？

Question

我有一个填充了数据的GridView，并且其中一列包含一个链接按钮（文件列表）。如果我点击链接按钮（文件列表），将会触发一个 .NET 事件，并调用数据库检索数据。如何使用 jQuery 显示该数据，以 HTML 表格格式显示为工具提示，就像附图所示？

- BumbleBee

---

检索到的数据是什么格式？JSON？HTML标记？ - GNi33

数据以JSON格式检索 - BumbleBee

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>

JavaScript

$('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演示

- Andy

---

这正是我正在寻找的！=D +1 - Mark

Answer 2

Andy的回答是有效的，但是"layerX"和"layerY"已经被弃用了。在使用Firefox、Chrome或Safari时，当使用"layerX"时，工具提示会在注释文本的顶部闪烁。

您可以将其替换为"clientX"和"clientY"：在使用Firefox、Chrome或Safari时，"clientX"没有任何问题。

- Fábio Castro