How to attach NGBootstrap tooltip to font awesome icon

Question

Trying to add a tooltip to a font awesome icon in an Angular page. The normal Bootstrap method seems to be ignored so I am trying to use the NGBootstrap method used for adding a tooltip to buttons, but the tool tip never displays. https://ng-bootstrap.github.io/#/components/tooltip/examples

The typical Bootstrap method causes an error of Cannot set property 'title' of undefined when hovering.

<i class="fa fa-info-circle" data-toggle="tooltip" title="Name here"></i>

In the component:

ngafterviewinit() {
    $(function() {
        $('[data-toggle="tooltip"]').tooltip();
    }
};

Answer 1

这似乎可行：

<i id="icon" class="fa fa-1x fa-info-circle" [ngClass]="icon" aria-hidden="true" placement="right" ngbTooltip="tipContent"></i>

Answer 2

You can also try using button tag.

<div class="infoCSSClass">
    <button class="icon-info" data-container="body" ngbTooltip="Here is tooltip text"  #toolTip="ngbTooltip"  (click)="toolTip.open()" placement="top"></button>
</div>