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

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

尝试对 bootstrap 工具提示使用 tooltip-append-to-body="true" 选项。

Answer 3

在 ngx-bootstrap 文档中：

When you have some styles on a parent element that interfere with a tooltip, you’ll want to specify a container="body" so that the tooltip’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like our input groups, button groups, etc) or inside elements with overflow: hidden

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

Answer 4

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

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

Answer 5

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

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

Bootstrap tooltip inside ag-grid cell showing partially

css

twitter-bootstrap

ag-grid