css popup对表的最后一行不起作用

HI guys!

So I've a table in html. And one of the columns has a popup in the cell to show some information. the table is also quite large so I've added an horizontal scrollbar on the top and bottom of the page with jquery, with the help of @Stanley, see question.

所以我在html中有一张表。其中一列在单元格中有一个弹出窗口以显示一些信息。该表也很大,所以我在jquery的页面顶部和底部添加了一个水平滚动条,在@Stanley的帮助下,请参阅问题。

The popup always stays at the bottom of the cell. But the scrollbar hides the last ones.
So what I would like is the popup to stay above the scrollbar.

弹出窗口始终位于单元格的底部。但滚动条隐藏了最后一个。所以我想要的是弹出窗口保持在滚动条之上。

I tried put

我试过试试

z-index: 999; #popup hover 
z-index: 1; #scrollbar

but that doesn't work.
Anyone has any idea?

但这不起作用。任何人都有任何想法?

If any code is needed, just ask.

如果需要任何代码,请询问。

Thank you all!

谢谢你们!

2 个解决方案

#1

use firefox firebug and position it using

使用firefox firebug并使用它定位它

 css  top:100px,left:100px.

can you increase width of table? actually i had a similar issue . i put an empty table with height of popup below the first table (you show popup on clicking of this tables columns).

你能增加桌子的宽度吗?实际上我有类似的问题。我在第一个表下面放了一个弹出高度的空表(单击此表列时显示弹出窗口)。

So the popup will not hide, or go inside the scroll.

因此弹出窗口不会隐藏,也不会进入滚动内部。

<table><tr><td>on click or mouse over show popup</td></tr>
<tr><td>on click or mouse over show popup</td></tr>
<tr><td>on click or mouse over show popup</td></tr>
<tr><td>as this the last td popup was going inside the scroll so i put table below</td></tr></table>

<table><tr><td height='50px'> </td></tr></table>

If this not at all your situation. pardon me . :)

如果这不是你的情况。对不起。 :)

#2

In the template, at the bottom:

在模板中,在底部:

 <div id="popup-flyer"></div>

Javascript file:

function make_tooltip () {
   var tooltip = $(this);
   var flyer = $("#popup-flyer");
   flyer.css('position', 'absolute');
   flyer.css('left', tooltip.position().left + 30);
   flyer.css('top', tooltip.position().top);
   flyer.append(tooltip.children('span').clone());
   flyer.show(1);
};

function hide_tooltip () {
   var tooltip = $(this);
   var flyer = $("#popup-flyer");
   flyer.hide(1);
   flyer.children('span').remove();
};

$(document).ready( function () {
$(".tooltip").hover(make_tooltip, hide_tooltip);
});

the css:

a class='tooltip'>
                <img src="image" alt="" height="20" width="20" />
                    <span> lalalakalsjsjhfksajhfdsh
                           text here....
                    </span>
            </a>

#1