Angular Material-如何将工具提示添加到禁用的按钮 [英] Angular Material - How to add a tooltip to a disabled button
问题描述
我注意到指令matTooltip
在禁用的按钮上不起作用.我该如何实现?
I've noticed that the directive matTooltip
doesn't work on a disabled button. How can I achieve it?
示例:
<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>
推荐答案
这不起作用,因为它是由mouseenter
事件触发的,大多数浏览器都不会针对禁用元素触发该事件.一种解决方法是将matTooltip
添加到父元素:
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>
以上示例假定存在一种确定是否应启用按钮的方法.通过使用matTooltipDisabled
,只有在禁用该按钮时,工具提示才会显示.
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.
参考:
- https://github.com/angular/material2/issues/5040
- https://github.com/angular/material2/issues/7953
这篇关于Angular Material-如何将工具提示添加到禁用的按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!