NgBootstrap的ngbPopover在表格td内无法显示的问题

问题排查方向及解决方案 #

• 检查的CSS溢出设置
  表格单元格<td>默认可能带有overflow: hidden样式，导致popover超出td范围的部分被截断隐藏。直接修改td的样式：

  td {
    overflow: visible;
  }
  

  如果通过ngClass绑定了自定义样式，也要确保自定义类中未设置overflow: hidden。

• 修复触发按钮的尺寸问题
  你提供的按钮标签内无任何文本或图标，导致按钮宽高可能为0，无法被点击触发popover。给按钮添加内容或强制设置最小尺寸：

  <button
    type="button"
    class="btn btn-outline-secondary me-2"
    placement="right"
    [container]="'body'"
    ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
    popoverTitle="Popover on top"
    style="min-width: 30px; min-height: 30px;"
  >
    弹窗
  </button>
  

• 调整container与placement属性
  确保container="body"使用Angular属性绑定方式[container]="'body'"，避免字符串解析问题。同时根据表格布局调整placement，比如用right/bottom代替top，防止popover被表格上方元素遮挡。

为什么/内正常？ #

<tbody>和<tr>默认没有overflow: hidden样式，popover超出范围后不会被截断；且触发元素在这些标签内有足够显示空间，能正常被交互触发。

内容的提问来源于stack exchange，提问作者David Salamon