如何将NGBootstrap工具提示附加到字体真棒图标

Question

尝试在Angular页面中的字体真棒图标中添加工具提示。 普通的Bootstrap方法似乎被忽略了，因此我尝试使用NGBootstrap方法来向按钮添加工具提示，但该工具提示从不显示。 https://ng-bootstrap.github.io/#/components/tooltip/examples

典型的Bootstrap方法会导致以下错误：悬停时无法设置未定义的属性“ title”。

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

在组件中：

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

您也可以尝试使用按钮标签。

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