Ngx-Bootstrap Popover Problem Doesn't Appear on Top of Other Elements

Question

I am trying to add a popover to a Ngx-bootstrap input form. I want the popover to appear over the top of the input fields below the input field the popover explains. When I click on the input field, the popover expands the div that contains the input form and moves the other input fields further down. I have done the research and tried adding the input container="body". This makes the popover appear behind the input form. It is no longer visible but I can see the size of the page changes and when I inspect it using the developer tools it does show the popover is there. I have tried changing the z-index using style="z-index:2000" in the html but that didn't seem to help. Can someone tell me what I am doing wrong?

This is a screen print of the popover expanding the div container instead of it displaying on top of the other input elements.

This is a screenshot after I added container="body". It appears to make the popover appear behind the other elements.

Here is the html file:

<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 file:

/* 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 versions:

"@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

I don't think that popover is a way to go in your case, since it's purpose is different. Maybe tooltip component would work better? https://valor-software.com/ngx-bootstrap/old/8.0.0/#/components/tooltip?tab=overview