部分显示ag-grid单元内的Bootstrap工具提示

Question

我正在尝试在悬停时在ag-grid单元格中显示bootstrap工具提示。问题是它部分显示在工具提示的一部分后面是下一个列单元格。我尝试为工具提示设置z-index。但仍然无法成功。请帮助。

Answer 1

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

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

Answer 2

在ngx-bootstrap文档中：

  

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

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

Answer 3

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

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

Answer 4

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

Answer 5

对于具有ng-bootstrap的angular5 +，请使用 container =“ body”