Angular Material - 如何向禁用的按钮添加工具提示 [英] Angular Material - How to add a tooltip to a disabled button

问题描述

我注意到指令 matTooltip 对禁用的按钮不起作用.我怎样才能实现它?

示例:

<mat-icon>删除</mat-icon>

对于启用的按钮，它可以完美运行:

<mat-icon>删除</mat-icon>

解决方案

这不起作用，因为它是由 mouseenter 事件触发的，大多数浏览器不会为禁用元素触发该事件.一种解决方法是将 matTooltip 添加到父元素:

<button mat-raised-button [disabled]="isButtonDisabled()"><mat-icon>删除</mat-icon>

上面的例子假设有一种方法可以确定按钮是否应该被启用.通过使用 matTooltipDisabled，只有在按钮被禁用时才会显示工具提示.

参考资料:

• https://github.com/angular/material2/issues/5040
• https://github.com/angular/material2/issues/7953

I've noticed that the directive matTooltip doesn't work on a disabled button. How can I achieve it?

Example:

<button mat-raised-button [disabled]="true" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

For an enabled button it works perfectly:

<button mat-raised-button [disabled]="false" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

解决方案

This doesn't work because it is triggered by mouseenter event which doesn't get fired by most browsers for disabled elements. A workaround is to add matTooltip to a parent element:

<div matTooltip="You cannot delete that" [matTooltipDisabled]="!isButtonDisabled()">
    <button mat-raised-button [disabled]="isButtonDisabled()">
        <mat-icon>delete</mat-icon>
    </button>
</div>

The example above assumes that there is a method for determining if the button should be enabled or not. By using matTooltipDisabled the tooltip will be shown only if the button is disabled.

References:

• https://github.com/angular/material2/issues/5040
• https://github.com/angular/material2/issues/7953

这篇关于Angular Material - 如何向禁用的按钮添加工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！