Tooltip popup window cutoff with horizontal scrolling enabled

Hi all,

I have created 2 seperate tables. Each table has 4 rows and in the left column are my 4 products (each has its own line). When you hover on the name of a product a popup window appears with an image of that specific product. The popup window with the image is larger than the height of table 1 so the popup windows partially covers table 2 which is directly below table 1.

That is all according to plan.

But my tables have many columns which make the tables very wide. I therefor have to enable horizontal scrolling for each table to keep them readable. But when I enable the horizontal scrolling option in Tablepress then my popup window only stays inside the corresponding table. And because the table height is much smaller than my popup window height my product image is cutoff.

I therefor would like my popup window to be outside the table. But I don’t know how to do that.

The CSS code I have used for my popup window is:

.tablepress-id-12 td {
position: relative;
}

.tablepress-id-12 .info-box {
display: none;
position: absolute;
z-index: 2;
top: 0;
left: 195px;
border: 2px solid #628eB2;
width: 300px;
height: 300px;
padding: 5px;
background-color: #ffffff;
color: #000000;
font-family: source sans pro;
font-weight: normal;
}

.tablepress-id-12 th:hover .info-box,
.tablepress-id-12 td:hover .info-box {
display: block;
}

And the code in the left column cell of my table is for example:

<b>Product name X</b>*

I hope someone can help me put the popup windows outside my table.

• This topic was modified 1 year, 11 months ago by EvD.