ag-grid 单元格内的引导工具提示部分显示答案

【问题标题】：Bootstrap tooltip inside ag-grid cell showing partiallyag-grid 单元格内的引导工具提示部分显示
【发布时间】：2018-02-10 13:07:14
【问题描述】：

我试图在悬停时在 ag-grid 单元格中显示引导工具提示。问题是它部分显示，而工具提示的一部分位于下一列单元格的后面。我尝试为工具提示设置 z-index。但还是没能成功。请帮忙。

【问题讨论】：

【解决方案1】：

您可以使用 CSS 工具提示，它可以在 agGrid 单元格中使用。请看一下这个plnkr：tooltip in agGrid cell

[data-tooltip]:before {
  content: attr(data-tooltip);
  display: none;
  position: fixed;
  margin: 10px 10px 10px 10px;    
}

【讨论】：

感谢 C.O.G！我通过给出 div.tooltip{ position:fixed; 解决了它}。你能解释一下 position:fixed 是如何工作的吗？
@codechimp 位置固定将根据窗口 x 和 y 值而不是包装元素放置它

【解决方案2】：

尝试使用tooltip-append-to-body="true" 选项作为引导工具提示。

【讨论】：

【解决方案3】：

在 ngx-bootstrap 文档中：

当父元素上的某些样式干扰工具提示时，您需要指定一个 container="body"，以便工具提示的 HTML 将附加到正文。这将有助于避免在更复杂的组件（如我们的输入组、按钮组等）或具有溢出的内部元素中出现渲染问题：隐藏

可以使用属性container="body"来解决问题

【讨论】：

【解决方案4】：

我可以通过添加以下 CSS 来解决这个问题

[col-id=health].ag-column-hover: {
    overflow: visible
}

【讨论】：

【解决方案5】：

对于带有 ng-bootstrap 的 angular5+ 使用 container="body"

【讨论】：