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

xxls0lw8  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(6)|浏览(174)

我尝试在ag-grid单元格中显示引导工具提示。问题是它只显示了一部分,而部分工具提示在下一列单元格后面。我尝试为工具提示设置z索引。但仍然无法成功。请帮助。x1c 0d1x

7kqas0il

7kqas0il1#

在ngx-bootstrap文档中:
当父元素上的一些样式干扰了工具提示时,您需要指定container=“body”,这样工具提示的HTML将被附加到body上。这将有助于避免在更复杂的组件(如输入组、按钮组等)中或带有溢出的元素内部出现渲染问题:隐藏的
可以使用属性container="body"来解决此问题

fv2wmkja

fv2wmkja2#

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

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

0pizxfdo3#

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

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

slwdgvem4#

对于带有ng-bootstrap的Angular 5+,请使用container=“body”

p1tboqfb

p1tboqfb5#

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

o2rvlv0m

o2rvlv0m6#

对我来说,这工作,添加下面的css到您的文件。所有信贷去https://stackoverflow.com/a/46007051/16456741

.ag-sparkline-tooltip {
        position: fixed;
}

相关问题