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

标签 jquery tooltip

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

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

enter image description here

最佳答案

简单的例子:

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

关于jquery - 如何使用 jQuery 将表格显示为工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7654711/

相关文章:

javascript - Sunburst D3 文本问题

c# - 如何在当前鼠标位置设置工具提示?

wpf - 工具提示样式 ToolTipService.ShowDuration

c# - 全局更改工具提示 InitialShowDelay 属性

javascript - 单击重新启动 CSS 动画

javascript - 获取元素属性的最佳方法是什么?

jquery - 获取单独的 Bootstrap 工具提示

javascript - 删除被图像重叠的额外区域

jquery - 切换按钮显示/隐藏 Div 不断向上跳

javascript - 当我单击下一个按钮时,页码按未知顺序升序。