当按钮在 angular 中禁用时,google chrome 中不显示任何工具提示
No tool tip is shown in google chrome when the button is disabled in angular
我有一个使用 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
中的问题
如何在禁用的按钮上显示工具提示?
您的问题似乎只存在于某些浏览器中(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>
@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 和 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
中的问题如何在禁用的按钮上显示工具提示?
您的问题似乎只存在于某些浏览器中(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>
@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
}