Ngx-Bootstrap Popover 问题不会出现在其他元素之上

Question

我正在尝试向 Ngx-bootstrap 输入表单添加一个弹出窗口。我希望弹出窗口显示在弹出窗口解释的输入字段下方的输入字段的顶部。当我单击输入字段时，弹出窗口会展开包含输入表单的 div，并将其他输入字段进一步向下移动。 我已经完成了研究并尝试添加输入容器=“body”。这使得弹出窗口出现在输入表单的后面。它不再可见，但我可以看到页面大小的变化，当我使用开发人员工具检查它时，它确实显示弹出窗口在那里。 我尝试在 html 中使用 style="z-index:2000" 更改 z-index 但这似乎没有帮助。 有人可以告诉我我做错了什么吗？

这是展开 div 容器的弹出窗口的屏幕打印，而不是显示在其他输入元素的顶部。

这是我添加container=“body”后的屏幕截图。它似乎使弹出窗口出现在其他元素后面。

这是 html 文件：

<div class="form-group hotSauce">
    <input
      type="text"
      [ngClass]="{
        'is-invalid': hasErrors('lineOfDescent') && isTouched('lineOfDescent'),
        'is-valid': !hasErrors('lineOfDescent') && isTouched('lineOfDescent')
      }"
      class="form-control form-control-lg"
      formControlName="lineOfDescent"
      placeholder="Line of Descent"
      [popover]="
        'Please enter your lineage from William F. Crowe 1793.  Example: William F. Crowe, Frederick G Crowe, Nathan Peter Crowe'
      "
      
      
      id="lineOfDescent"
    />
  </div>
  <div
  *ngIf="hasError('lineOfDescent', 'minlength')"
  class="invalid-feedback"
>
  Line of Descent Must Have at Least One Name.
</div>

CSS文件：

/* this code was changing the background color behind the tooltip */
/*:host ::ng-deep .bs-popover-top {

 margin: 50px;
 margin-top: 140px;
 z-index: 10002 !important;
}
*/

.popover-inner {
  background-color: pink !important;
}



.hotSauce {
  background: none;
 
  
}

Angular、Ngx-Boostrap 版本：

"@angular/compiler-cli": "~13.3.0",
"bootstrap": "^5.1.3",
"ngx-bootstrap": "^8.0.0",
"ngx-spinner": "^13.1.1",

 <link
    href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”
    rel=”stylesheet”>

Answer 1

我不认为弹出窗口适合您的情况，因为它的目的不同。也许工具提示组件会更好用？ https://valor-software.com/ngx-bootstrap/old/8.0.0/#/components/tooltip?tab=overview