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

【问题标题】：How to attach NGBootstrap tooltip to font awesome icon如何将 NGBootstrap 工具提示附加到字体真棒图标
【发布时间】：2019-01-11 09:26:29
【问题描述】：

尝试将工具提示添加到 Angular 页面中的字体真棒图标。正常的 Bootstrap 方法似乎被忽略了，所以我尝试使用用于向按钮添加工具提示的 NGBootstrap 方法，但工具提示从不显示。 https://ng-bootstrap.github.io/#/components/tooltip/examples

典型的 Bootstrap 方法会导致悬停时无法设置属性 'title' of undefined 的错误。

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

在组件中：

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

【问题讨论】：

你试过用元素代替吗？
错误来自其他地方，已修复。但是仍然没有得到一个漂亮的工具提示，只是默认的浏览器，带有 和 .

标签： javascript css angular font-awesome ng-bootstrap

【解决方案1】：

这似乎有效：

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

【讨论】：

【解决方案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>

【讨论】：

这只是创建一个大按钮，而不是一个小图标。我可以把它做成一个小按钮，但比让图标成为触发器更像是一种技巧。
使用CSS，可以处理按钮显示。答案没有错。