Question

我正在使用ng-bootstrap，我想在svg elemet上添加一个popover或工具提示。我需要这个弹出窗口包含一个按钮和一些文本。

我试过的是：

$('#btnSubmit').on('click', function(){
  for(var increment = 0; increment <= pos_inc; increment++)
  {

      var text1 = $('#orders'+increment).val();
      var text2 = $('#item_quan'+increment).val();
      var text3 = $('#price_tot'+increment).val();

  }

 $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "yoururlhere",
      data: "{'text1':'" + text1+ "', 'text2':'" + text2+ "', 'text3':'" + text3+ "'}",
      success: function (result) {
           //do somthing here
      }
 }); 

});

我也导入了库：

<ng-template #popContent>Book this seat <button>Book</button></ng-template>

<svg:circle [attr.id]="seat.id" class="seat tooltips" [attr.cx]="seat.x" [attr.cy]="seat.y" r="4" style="fill: rgb(206, 206, 206);" [ngbPopover]="popContent"></svg:circle>

我正在运行bootstrap 4.0.0-alpha.6。

它没有显示，因为生成的弹出窗口被放置在svg内部，浏览器无法以这种方式呈现它。是否有一些可行的解决方法，某种方式我可以显示这些弹出窗口？

谢谢。

Answer 1

您可以使用API documentation：

中所述的container选项

一个选择器，指定应将popover追加到的元素。目前只支持“body”。

通过使用container="body"，您可以将弹出窗口添加为<body>元素的子元素（而不是SVG的圆元素的兄弟）：

<ng-template #popContent>Book this seat <button>Book</button></ng-template>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <svg:circle [attr.id]="seat.id" [attr.cx]="seat.x" [attr.cy]="seat.y" r="4" style="fill: rgb(206, 0, 0);" [ngbPopover]="popContent" container="body"></svg:circle>
</svg>

以下是一位正在运作的人员：http://plnkr.co/edit/lVYsY3LDVX9WGZhbMBMu?p=preview

另请注意正确导入为import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; - 请查看链接的plunker以获取完整示例。

Answer 2

我做到了：

有一个名为container的选项，用于指定追加弹出窗口的位置。

container="body"

只有＆＃34;身体＆＃34;目前支持。

ng-bootstrap popover over svg element

2 个答案: