在Angular中禁用带有工具提示的Bootstrap 4按钮答案

【问题标题】：Disabled Bootstrap 4 button with tooltip in Angular在Angular中禁用带有工具提示的Bootstrap 4按钮
【发布时间】：2018-08-15 07:06:25
【问题描述】：

我正在尝试使用 ngx-bootstrap 和 Angular 创建一个 Bootstrap 4 按钮。但是，只有将鼠标悬停在禁用按钮的图标上才会显示工具提示。如何将鼠标悬停在禁用按钮上的任意位置以显示工具提示。

代码：仅将鼠标悬停在图标上有效：

<span tooltip="hello" [isDisabled]="false">
    <button type="button" class="btn btn-primary" disabled>
        <i class="fa fa-book-open"></i> btn disabled
    </button>
</span>

这是一个工作示例： https://stackblitz.com/edit/ngx-bootstrap-rmnmf1

【问题讨论】：

标签： angular bootstrap-4 ngx-bootstrap

【解决方案1】：

一种可能的解决方案是在按钮内创建工具提示。它将开始显示 <button> 标签内任何内容的工具提示

<button type="button" class="btn btn-primary" disabled>
  <span tooltip="hello" [isDisabled]="false">
    <i class="fa fa-book-open"></i> btn disabled
  </span>
</button>

【讨论】：