当表格容器具有溢出-x 自动时，工具提示被切断答案

【问题标题】：Tooltip gets cut off when a table container has overflow-x auto当表格容器具有溢出-x 自动时，工具提示被切断
【发布时间】：2021-04-09 21:25:08
【问题描述】：

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

使用溢出-x：自动 [[有溢出-x][]1]

没有溢出-x：自动 [[没有溢出-x][]1]

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

我使用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

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

其他说明

我不能过多地修改工具提示，因为它是我们公司现有的组件，我们必须在很多地方进行更改。它也可以在其他地方按预期工作。
如果有任何信息缺失，请告诉我，我会尽快回复。

现在欢迎任何见解！

【问题讨论】：

能否分享一下工具提示组件的代码？

标签： html css reactjs

【解决方案1】：

我们也遇到过类似的问题。我们解决此问题的方法是添加支持以在反应门户中呈现工具提示视图。

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

添加门户组件：

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

添加一个 usePortal 属性，它将在门户中呈现视图。否则，视图将按当前状态呈现。

您将拥有一个呈现工具提示视图的viewDom，使用 Portal 组件：

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;

【讨论】：

感谢 Pritam 的回复。 React Portal 看起来可能是一个“漂亮”的解决方案，我会尽快测试它！
如果我尝试这个解决方案，工具提示的定位和样式会完全搞砸。这是您所期望的行为吗？
是的，如果您使用 sass，则需要将工具提示视图类移到任何容器包装类之外，或者更好的是，将它们移到您的根样式文件中。
这是因为一旦您使用门户进行查看，视图将处于正常顺序之外的 dom 中，这将破坏样式

【解决方案2】：

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

【讨论】：

感谢 UXOL 的回复。在组件的悬停中，可见性设置为可见。所以不幸的是，解决方案并不是那么容易。
我觉得事情没那么简单，网页设计也不是我的强项哈哈。我只是想看看我是否可以尝试一下。感谢您的答复。祝你好运！

【解决方案3】：

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

如果

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

【讨论】：

感谢 Jkuss 的回复。这要么需要大量空间，要么在悬停时会将桌子向下移动？我认为这不是你想要的工具提示，它应该覆盖。

【解决方案4】：

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

【讨论】：