Html 当表格容器具有overflow-x auto时，工具提示将被切断

我发现了许多与此相关的问题，但没有一个与完全相同的问题相匹配，我也无法解决与其他“相关”问题相关的问题。下面您可以看到两个屏幕截图，一个带有overflow-x:auto，另一个没有

带溢出-x:auto [[带溢出-x][]1]

无溢出-x:auto [[无溢出-x][]1]

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

我使用overflow-x的原因：自动

我正在使用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工具提示

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

其他注释

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

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

---

在这一点上欢迎任何见解

我不确定这是否能解决问题，但我注意到可见性设置为隐藏，这将隐藏不适合该特定分区的所有内容。您可能希望尝试将其设置为可见，以查看它是否能解决此切断问题。我不知道这是否是解决此问题的方法，但我想尝试帮助ha ha。

如果您的工具提示具有最大高度，您可以在表格中添加填充/边距顶部以清除该高度

所以如果

---

我们曾面临类似的问题。解决此问题的方法是添加一个支持，以在react门户中呈现工具提示视图

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

添加门户组件：

const门户=（道具）=>{
const{children，target=document.body}=props；
返回ReactDOM.createPortal（子对象、目标）；
};

添加一个

usePortal

prop，它将在门户中呈现视图。否则，视图将呈现为当前状态

您将拥有一个呈现工具提示视图的

viewDom

，请使用门户组件：

const{usePortal}=props；
const viewDom=您的视图dom；
如果（使用门户）{
返回(
{viewDom}
)
}
//否则，返回没有门户的默认dom
返回viewDom；

尚未测试，但您的

tr

仅具有40px的高度，将在自动模式下切断溢出，因为您的三行文本将占用超过40px的空间。

---

您应该尝试将

tr

设置为

position:relative

，并将工具提示设置为

position:absolute

，以进行定位，而忽略溢出

谢谢你的回复。在零部件悬停时，可见性将设置为可见。所以这个解决方案并不是那么简单，我想它并没有那么简单，网页设计也不是我的强项。我只是想看看我能不能试一下。谢谢你的回复。祝你好运！感谢普里塔姆的回复。React门户看起来可能是一个“漂亮”的解决方案，我将在有时间的时候对其进行测试！如果我尝试此解决方案，工具提示的定位和样式将完全混乱。这是您所期望的行为吗？是的，如果您使用sass，则需要将工具提示视图类移到任何容器包装器类之外，或者更好，将它们移到根样式文件中。这是因为，一旦您使用门户进行查看，视图将处于超出正常顺序的dom中，这将破坏响应的StylesHanks Jkuss。这要么需要很大的空间，要么悬停时会将桌子向右下移？我认为这不是你想要的工具提示，它应该覆盖。你能分享工具提示组件的代码吗？

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

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