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

时间:2011-10-04 22:23:17

标签: jquery tooltip

我有一个填充了数据的Gridview,其中一个列包含一个链接按钮(文件列表)。如果我单击Linkbutton(FileList),将触发.net事件,并将调用数据库以检索数据。

如何将HTML表格格式的数据显示为工具提示,如附图所示?我想使用jQuery实现工具提示。

enter image description here

2 个答案:

答案 0 :(得分:13)

简单示例:

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

答案 1 :(得分:0)

上面的Andy响应应该起作用,但是应将“ layerX”和“ layerY”(已弃用)替换为“ clientX”和“ clientY”。

或者我的Firefox,Chrome和Safari,“ clientX”可以100%工作,但是当使用“ layerX”时,工具提示在注释文字的顶部闪烁。

相关问题