Tooltip gets cut off when a table container has overflow-x auto - html

Question

I have found a lot of issues related to this one, but not one that matches the exact same problem and I was also not able to resolve my problem with other "related" issues. Below you can see two screenshots, one with overflow-x: auto and one without.
With overflow-x: auto
[[With overflows-x][]1]
Without overflow-x: auto
[[Without overflows-x][]1]
So overflow-x auto is cutting off my tooltip when it overflows vertically. I do not know why it behaves this way, even if I put overflow-y visible on it, it does not work.
Reason I am using overflow-x: auto
I am using overflow-x: auto to make my table responsive on resize. This will give me a scrollbar when the content does not fit. I see that many people use this to make their tables responsive.
Important code parts that I am currently using
HTML
<div key={uniqueKey} className={'table-container'}>
<table>
<thead>
<tr>
<th scope='col'>Id</th>
<th scope='col'>Name</th>
</tr>
</thead>
<tbody>
{someList.map((item, index) => {
return (
<tr key={index}>
<td data-label='Id'>{id}</td>
<td data-label='Name'>{name}</td>
<td data-label='Actions'>
<div className={'actions-container'}>
// EXISTING TOOLTIP COMPONENT HERE, I WILL SHOW THE CSS.
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
CSS
.table-container {
overflow-x: auto;
border-collapse: separate;
table-layout: fixed;
table {
width: 100%;
tr {
height: 40px;
}
td {
height: auto;
}
th {
min-width: 175px;
padding: 8px;
}
}}
CSS Tooltip
.tooltip{
width: 300px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
position: absolute;
z-index: 100;
word-break: normal;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s;
transition-delay: 0.4s;}
Other notes
I can not modify the tooltip too much since it is a existing component within our company, we would have to change it on lots of places. Also it works as expected on other places.
If there is any information missing, just let me know and I will respond as soon as possible.
Any insights are welcome at this point!

Answer 1

We had faced similar issue. The way we solved this is add a support to render the tooltip view in a react portal instead.
You'll need a component change but you don't need to change a lot of existing code.
Add a portal component:
const Portal = (props) => {
const { children, target = document.body } = props;
return ReactDOM.createPortal(children, target);
};
Add a usePortal prop that'll render the view in portal instead. Otherwise the view will be rendered as it is currently.
You'll have a viewDom that renders your tooltip view, use the Portal component:
const { usePortal } = props;
const viewDom = <span> Your view dom </span>;
if (usePortal) {
return (
<Portal>
{ viewDom }
</Portal>
)
}
// otherwise return the default dom without portal
return viewDom;

Answer 2

I’m not sure if this would solve the issue or not, but I noticed that the visibility is set to hidden and that will hide everything that doesn’t fit within that specific div. You might want to try setting that to visible to see if it fixes this cut off issue. I have no idea if that is the fix to this, but I wanted to try and help ha ha.

Answer 3

If your tooltips have a max-height, you can add padding/margin top to the table to clear that height.
So if
.tooltip {
...
max-height: 3em;
}
table {
margin-top: 3em;
}

Answer 4

Haven't tested it but your tr only has 40px height and will cut off the overflow on auto, because your three lines of text will take more than 40px space at all.
You should try to set the tr to position:relative and the tooltip to position:absolute for positioning and forget about the overflow;