Angular Material - 如何向禁用的按钮添加工具提示答案

【问题标题】：Angular Material - How to add a tooltip to a disabled buttonAngular Material - 如何向禁用的按钮添加工具提示
【发布时间】：2021-10-06 18:55:13
【问题描述】：

我注意到指令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>

【问题讨论】：

请注意，您的文字违反了 Material Design 指南。工具提示应该只描述按钮。某人不能删除某些东西的信息应该显示在别处。来源：material.io/guidelines/components/tooltips.html#
感谢您的提示。我想知道如何使它变得更好。如果我这样称呼它：“此按钮已禁用，因为您不允许删除它”，是否可以接受？
在我看来，从按钮的上下文中应该已经很清楚了。当一个按钮被禁用并且有一个垃圾桶图标时，这已经说明用户不能在不使用文字的情况下删除它。如果您想解释为什么，我认为您应该使用与工具提示不同的方法。我不是专家，也许你最好在 ux.stackexchange.com 上提问。我在那里进行了快速搜索：ux.stackexchange.com/search?q=tooltip+on+disabled+button，这可能是我们俩都感兴趣的。
我发现抢占验证很有用。最好使用显示“您必须先选择一个事件”的工具提示禁用的按钮。而不是必须单击才能显示错误，或者被禁用且不提供任何信息的选项。

标签： angular angular-material2

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

参考文献：

【讨论】：

我可能遗漏了一些东西，但这不显示按钮是否被禁用吗？它似乎显示得很好，但我只是希望它在按钮被禁用时显示。
对于正在寻找仅在按钮被禁用时才显示的解决方案的任何人，请参阅stackoverflow.com/questions/29201953/…
@goneos 我已经更新了答案来回答你的问题
谢谢@MarcvinKunert。我做的有点不同matTooltip="isButtonDisabled() ? 'You cannot delete that' : ''"
我实际上收到一条消息说 div 没有 matTooltipDisabled 属性。我可以确认你不明白吗？

【解决方案2】：

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

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

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

由于图标没有被禁用，所以它可以工作。

【讨论】：

工具提示只会在悬停图标而不是整个按钮时显示
还有，如果没有图标怎么办？

【解决方案3】：

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

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

【讨论】：

为我工作:):)

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

你可以使用title属性，它会在必要的情况下显示

<button mat-raised-button [disabled]="true" title = "Some text">
  <mat-icon>delete</mat-icon>
</button>

您可以使用三元运算符进行属性绑定

【讨论】：

是否可以立即在悬停时立即显示标题？

【解决方案6】：

我找到了解决办法！

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

<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>

【讨论】：

【解决方案7】：

试试这个：

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

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。

【解决方案8】：

我知道这很丑，但你也这样做，使用多个按钮和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>

【讨论】：

【解决方案9】：

只需像这样将样式“指针事件：全部”添加到您的按钮

<button mat-raised-button style="pointer-events: all" [disabled]="true" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

【讨论】：

这对我很有用。比添加额外的 div 包装器或 switch 语句要容易得多。谢谢！