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为true时，即禁用按钮时，工具提示不会在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/sstackoverflow-ngtooltip-7te4bd

Answer 2

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

由于引导程序具有.disabled类，因此我决定使用该类。

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

现在代码如下：

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

组件文件：

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

禁用角度按钮时，Google Chrome中不会显示工具提示

2 个答案: