当表容器溢出-x auto时，工具提示被切断

Question

我发现了很多与此相关的问题，但没有一个与完全相同的问题相匹配，而且我也无法用其他"相关的"；问题。下面你可以看到两个屏幕截图，一个带有overflow-x:auto，另一个没有。

有溢出-x:自动[[有溢出-x][]1]

无飞越-x:自动[[无飞越-x][]1]

所以overflow-x auto在垂直溢出时会切断我的工具提示。我不知道它为什么会这样，即使我把overflow-y放在上面，它也不起作用。

我使用overflow-x:auto的原因

我正在使用overflow-x:auto使我的表在调整大小时做出响应。当内容不合适时，这会给我一个滚动条。我看到很多人用这个来让他们的桌子反应灵敏。

我当前使用的重要代码部分

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{
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;}

其他注意事项

• 我不能过多修改工具提示，因为它是我们公司现有的组件，我们必须在很多地方更改它。此外，它在其他地方也能正常工作。

• 如果有任何信息丢失，请告诉我，我会尽快回复。

在这一点上，欢迎任何见解！

Answer 1

我们也遇到过类似的问题。我们解决这一问题的方法是添加对在react门户中渲染工具提示视图的支持。

您需要更改组件，但不需要更改大量现有代码。

添加门户组件：

const Portal = (props) => {
const { children, target = document.body } = props;
return ReactDOM.createPortal(children, target);
};

添加一个usePortal道具，该道具将在门户中呈现视图。否则，视图将按当前状态进行渲染。

您将有一个viewDom来呈现工具提示视图，使用门户组件：

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

我不确定这是否能解决问题，但我注意到可见性设置为hidden，这将隐藏不适合该特定div的所有内容。您可能想尝试将其设置为visible以查看它是否修复了这个截断问题。我不知道这是否是解决问题的办法，但我想试着帮助哈哈。

Answer 3

如果工具提示有一个最大高度，可以在表中添加padding/margin-top来清除该高度。

所以如果

.tooltip {
...
max-height: 3em;
}
table {
margin-top: 3em;
}

Answer 4

还没有测试过，但你的tr只有40px的高度，并且会在auto上截断溢出，因为你的三行文本将占用超过40px的空间。您应该尝试将tr设置为position:relative，将工具提示设置为position:absolute以进行定位，并忘记溢出；