角度材质 - 如何将工具提示添加到禁用按钮

Question

我注意到该指令matTooltip不适用于禁用按钮.我怎样才能实现它？

例:

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

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

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

Answer 1

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

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

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

参考文献:

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

Answer 2

按照其他人的建议，在按钮的 mat-icon 内添加工具提示仅当您将鼠标悬停在图标而不是按钮时才有效。相反，您可以将按钮包裹在另一个 div 周围，无需任何 css 类，只需工具提示。

此外，您还可以添加matTooltipDisabled属性以确保您的工具提示永远不会被禁用。

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

Answer 3

在禁用的图标按钮上显示工具提示时，我遇到了类似的问题。给定的解决方案对我而言不切实际，因为在按钮上方添加了一个额外的div，使按钮相对于工具栏中其他按钮的布局变得混乱。

对我来说，更简单的解决方案是在按钮内的图标内添加工具提示。像这样：

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

由于未禁用该图标，因此可以使用。

Answer 4

是的，最简单的解决方案如上述。但就我而言，我需要更大的灵活性。

   <button  [disabled]="form.invalid">
      <span [matTooltip]="form.invalid ? 'some text' : ''">button text</span>
    </button>