当按钮在 angular 中禁用时，google chrome 中不显示任何工具提示

Question

我有一个使用 angular 和 ng-bootstrap 构建的项目。我正在使用 ngbTooltip 在按钮上显示工具提示。

<button 
    class="btn btn-success"
    (click)="onSubmit()"
    [ngbTooltip]="tipContent"
    [disabled]="disabled">
    Save
</button>

<ng-template #tipContent>
    Please fill out all mandatory fields before saving
</ng-template>

但是，当变量 disabled 为真时，即当按钮被禁用时，工具提示不会显示在 Google Chrome 中，但在 Firefox 中有效。

重现 stackblitz

中的问题

如何在禁用的按钮上显示工具提示？

Answer 1

您的问题似乎只存在于某些浏览器中（Firefox 中显示工具提示，Chrome 中不显示）。

对此的全局修复是将按钮包装在另一个元素中并在包装器上显示工具提示。

<span [ngbTooltip]="tipContent">
  <button type="button" class="btn btn-outline-secondary" [disabled]="disable">
      I've got markup and bindings in my tooltip!
  </button>
</span>

演示：https://stackblitz.com/edit/sWhosebug-ngtooltip-7te4bd

Answer 2

@kurt-hamilton 的解决方案有效，但它有一些问题，工具提示出现在按钮内，并且有一些闪烁。

由于 bootstrap 有 .disabled class，我决定使用它。

已添加 [class.disabled]="!canSave"。

现在代码如下所示：

<button 
    class="btn btn-success"
    (click)="onSubmit()"
    [ngbTooltip]="tipContent"
    [class.disabled]="disabled">
    Save
</button>

组件文件：

onSubmit() {
    if (!this.canSave) {
        return;
    }
    // onSubmit code
}

当按钮在 angular 中禁用时，google chrome 中不显示任何工具提示

No tool tip is shown in google chrome when the button is disabled in angular

angular

typescript

bootstrap-4

ng-bootstrap