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，仅当按钮被禁用时，才会显示工具提示。

参考文献：

Answer 2

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

Chr(160)

Answer 3

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

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

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

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

Answer 4

我找到了解决方法！

将工具提示放入按钮内容中，如下所示：

<button type="submit" [disabled]="disableEdit()" class="btn btn-primary btn-sm"
        [routerLink]="['/entity', entity.id, 'edit']">
    <div matTooltip="{{ 'entity.placeholders.cantEdit' | translate }}"
         [matTooltipDisabled]="disableEdit()">
        <fa-icon [icon]="'pencil-alt'"></fa-icon>
        <span class="d-none d-md-inline">{{ 'entity.action.edit' | translate }}</span>
    </div>
</button>

Answer 5

尝试一下：

<div [matTooltip]="isDisabled ? 'You cannot delete that' : ''">
    <button mat-raised-button [disabled]="isDisabled">
      <mat-icon>delete</mat-icon>
    </button>
    <div>

Answer 6

按照其他人的建议在按钮中的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 7

我知道这很丑，但你也这样做，使用多个按钮 ngIf

<!-- No click action -->
<button *ngIf="disable" mat-raised-button matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

<button *ngIf="!disable" mat-raised-button (click)="delete()">
  <mat-icon>delete</mat-icon>
</button>

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

7 个答案: