Bootstrap tooltip inside ag-grid cell showing partially

Question

I am trying to show bootstrap tooltip in ag-grid cell on hover. Issue is it's showing up partially while part of the tooltip is behind the next column cell. I tried setting z-index for tooltip. But still not able to succeed. Kindly help.

Answer 1

You can use CSS tooltips, which will work inside agGrid cells. Please take a look at this plnkr: tooltip in agGrid cell

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

Answer 2

In ngx-bootstrap documentation:

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

You can use the attribute container="body" to solve the problem

Answer 3

I was able to solve this one by adding the following CSS

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

Answer 4

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

Answer 5

for angular5 + with ng-bootstrap use container =“body”