Ngbpopover is not taking the external css that is define in ng-template when container="body" is used in ngbpopover

Question

I want my ngbpopover to appear at the top of the parent element as it is appearing below the parent element. I had put container="body" in ngbpopover that fix the given issue but somehow the external css is not appearing that I had defined in ng-template.

<mat-tab-group animationDuration="0ms">
  <div *ngFor="let sampleData of sampleDataInfo[j]; let i=index">
    <mat-tab label="{{targetData[j][i].fullName}}">

      <table class="source-target-Info-table">
        <tr class="source-target-Table">
          <th><img data-toggle="tooltip" data-placement="bottom" title="Sub1"></th>
          <th>row2</th>
          <th>row3</th>
          <th>row4</th>
          <th>row5</th>
          <th>row6</th>
          <th>row7</th>
          <th>row8</th>
          <th>row9</th>
          <th>row10</th>
        </tr>
        <tr *ngFor="let target of targetData[j][i].files; let file=index">
          <td>
            <a class="info-link" href="javascript:;" title=" Log-{{sampleData?.sessionId}}" (click)="openDexLog(j,i)">
                                                            {{(1)}}
                                                        </a>
          </td>
          <td *ngIf="target.qualityLevel > 0; else negativeQuality">
            **<a class="info-link" href="javascript:;" title="Click to see Quality result files" href="javascript:;" placement="top-left" popoverClass="popover-class" [ngbPopover]="popContentQuality" container="body">{{target.qualityLevel}}</a>**
          </td>


          **
          <ng-template class="quality-popover" #popContentQuality>**
            <h1 class="quality-heading">Quality Results for</h1>
            <h3 class="file-name">{{target.name}}</h3>
            <table class="source-target-Info-table">
              <tr class="source-target-Table">
                <th>FILE NAME</th>
                <th>SIZE</th>
                <th>DESCRIPTION</th>
              </tr>
              <tr *ngFor="let tq of tqData; let i=index">
                <td>
                  <a class="info-link" href="javascript:;">{{tq.name}}</a>
                </td>
                <td>{{tq.size/1000}} KB</td>
                <td>{{tq.description}}</td>
              </tr>
            </table>
          </ng-template>
        </tr>
      </table>

    </mat-tab>
  </div>
</mat-tab-group>

It is only taking the css if is defined in inline format ( using style). Is there any to make the external css working when container="body" for ngbpopover in ng-template? I had also tried to define the external css in the component that consist of body tag but that doesn't work for me. Any suggestions regarding this will be helpful.

Answer 1

Probably styles incapsulated in :host selector. Input container="body" makes you tooltip content not inside host component.

Answer 2

By replacing the entire content of the body, you remove the registered eventListeners. I guess you had an eventListener for the click on "close" button, so the click is no longer listened, and it would be quite difficult to "reconnect" all the events.

To display specific content for print, I advise you not to touch the DOM, and to manage it only with a specific style sheet :

@media print {
  section {
    display: none;
  }
}