ng-bootstrap popover动态放置

Question

我有一个气泡图，其中气泡＆＃39;展示位置和大小是动态生成的。当我点击一个气泡时，我想显示一个带有相应气泡细节的popover。我设法弄清楚如何将弹出窗口放在正确的一侧，现在我试图弄清楚如何根据气泡的大小来动态地设置弹出窗口。任何人都可以帮我吗？

案例的简单抽象是这样的：

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { NgModule, Component } from '@angular/core';
import { NgbModule } from 'ng-bootstrap';



@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NgbModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
})
class AppModule { }

@Component ({
  selector: 'app-root',
  template: `
    <div class="div1" placement="right"
        ngbPopover="Whatever" popoverTitle="Popover"></div>
    <div class="div2" placement="right"
        ngbPopover="Whatever" popoverTitle="Popover"></div>
    <div class="div3" placement="left"
        ngbPopover="Whatever" popoverTitle="Popover"></div>
  `,
   styles: [`
    div {
      position: absolute;
      border-radius: 50%;
    }
    .div1 {
      top: 400px;
      left: 100px;
      width: 30px;
      height: 30px;
    }
    .div2 {
      top: 400px;
      left: 400px;
      width: 80px;
      height: 80px;
    }
    .div3 {
      top: 400px;
      left: 1000px;
      width: 120px;
      height: 120px;
    }
   `]
})

class AppComponent {}
platformBrowserDynamic().bootstrapModule(AppModule);

我希望弹出框总是放置自己，箭头指向触摸圆圈的最左边或最右边的点。