angular - 当按钮以角度禁用时，谷歌浏览器中不显示任何工具提示

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中重现问题

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

标签： angulartypescriptbootstrap-4ng-bootstrap

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/sstackoverflow-ngtooltip-7te4bd