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

Posted 2021-03-27

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

答案

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

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

另一答案

在ngx-bootstrap文档中：

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

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

另一答案

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

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

另一答案

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