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

Question

我正在尝试使用 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

Answer 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>

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

Disabled Bootstrap 4 button with tooltip in Angular

bootstrap-4

ngx-bootstrap

angular