Question

<!-- Popover #1  used this html--> 
<a class="btn btn-primary" data-placement="top" data-
popover-content="#a1" data-toggle="popover" data-t 
trigger="focus" href="#" tabindex="0">Popover 
Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>

使用这个HTML代码，我需要顶部，左侧，右侧和底部的CSS 并使用指令触发它，因为我不想使用jQuery
代码或任何库。

Answer 1

https://ng-bootstrap.github.io/#/components/popover/api 这个版本的ng-bootstrap更有用。

Answer 2

如果您不想使用jquery，

ngx-popover将解决您的问题。

npm install ngx-popover --save

Answer 3

我正在使用此代码。

我在html代码中有弹出框模板：

<popover-content #myPopover 
      title="" 
      placement="bottom"
      [animation]="true" 
      [closeOnClickOutside]="true" >

      <ul class="list-group" *ngFor="let item of notifications">
            <!-- <li class="list-group-item">{{item.name}}</li> -->
            <li class="list-group-item"><span>
                        <img  class="" src="assets/img/16.png" alt="" height="20px" width="20px" >
            </span>{{item.name}}</li>

      </ul>

      </popover-content>

然后我在导航项中使用此名称（您可以在任何地方使用它）：

<li class="nav-item" [popover]="myPopover">
   <a class="nav-link " > Notificaciones</a>
</li>

如何使用没有jquery popover函数的bootstrap popover和angular4中的angular4库

3 个答案: