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

我注意到指令

matTooltip

对禁用的按钮不起作用。我怎样才能做到呢

例如：

删除

对于启用的按钮，它可以完美地工作：

删除

这不起作用，因为它是由

mouseenter

事件触发的，大多数浏览器不会为禁用的元素触发该事件。解决方法是将

matTooltip

添加到父元素：

删除

上面的示例假设存在一种确定按钮是否应启用的方法。使用

matTooltipDisabled

仅当按钮被禁用时才会显示工具提示

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

参考资料：

---

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

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

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

删除

---

因为图标没有被禁用，所以它可以工作。

是的，最简单的解决方案如下。但对于我的情况，我需要更多的灵活性

按钮文本

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

删除

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

我找到了一个解决方案

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

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

{{'entity.action.edit'| translate}}

试试这个：

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

删除

仅当您将图标悬停在按钮上而非按钮上时，才会按照其他人的建议在按钮中的垫子图标内添加工具提示。相反，您只需将按钮环绕在另一个div上，而无需任何css类，只需工具提示即可

此外，还可以添加matTooltipDisabled属性，以确保工具提示从未被禁用

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

删除

我知道这很难看，但你也可以这样做，使用多个按钮

ngIf

删除

删除

请注意，您的文字与材料设计指南不符。工具提示应仅描述按钮。有人不能删除某些内容的信息应显示在其他位置。来源：谢谢你的提示。我想知道如何使它更好。如果我这样称呼它：“这个按钮是禁用的，因为你不允许删除它”这是可以接受的吗？在我看来，从按钮的上下文中应该已经很清楚了。当一个按钮被禁用并且有一个垃圾箱图标时，这已经解释了用户不使用单词就不能删除它。如果您想解释为什么我认为您应该使用不同于工具提示的方法。我不是专家，也许你最好在ux.stackexchange.com上提问。我在那里做了一个快速搜索：这可能是我们两人都感兴趣的。我发现预先验证很有用。与必须单击以显示错误或禁用且不提供任何信息的按钮相比，使用工具提示显示“您必须首先选择事件”的按钮禁用的按钮更好。我可能遗漏了一些内容，但这不显示按钮是否禁用吗？它似乎显示得很好，但我只希望它在按钮被禁用时显示。对于正在寻找仅在按钮被禁用时显示的解决方案的任何人，请参阅@goneos我已更新答案以回答您的问题谢谢@MarcvinKunert。我做的有点不同。

matTooltip=“isButtonDisabled（）？”您不能删除它：“

我实际上收到一条消息，说div没有matTooltipDisabled属性。我可以确认你没有收到吗？对我有用：）：）工具提示将只在悬停图标时显示，而不是整个按钮。那么，如果没有图标怎么办？悬停时是否可以立即显示标题？欢迎使用堆栈溢出！虽然这段代码可以解决这个问题，但如何以及为什么解决这个问题将真正有助于提高您的帖子质量，并可能导致更多的投票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。请在回答中添加解释，并说明适用的限制和假设。