Ngx-bootstrap popover出现在另一个位置

Question

我想让我的popover出现在另一个location。

它是否使用ng-template将popover定位在另一个位置？

<ng-template #popmeover>
    <button type="button" (click)='pop.hide()' class="close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    <p>
    I am a popoverat another location trying my best to popover!
    </p>
</ng-template> 
            
         <br><br>
         <br><br>
         <span  [popover]="popmeover" #pop="bs-popover" container="body" >you click me popover should appear there!</span>
         <br>
         <br>
  
         <span >Make popover appear here!</span>

Answer 1

您可以执行以下操作：

<ng-template #popmeover>
    <button type="button" (click)='pop4.hide()' class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <p>
      I am a popoverat another location trying my best to popover!
    </p>
  </ng-template>

  <br>
  <br>
  <br>
  <br>
  <span (click)="pop4.show()">you click me popover should appear there!</span>
  <br>
  <br>

  <span [popover]="popmeover" #pop4="bs-popover" container="body">Make popover appear here!</span>

工作Plunkr

Answer 2

您可以像这样使用CSS：

  .popover {
  top: ###px !important;
  bottom: ###px !important;
  left: ###px !important;
  right: ###px !important; 
  }

然后将其作为弹出窗口的类应用