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

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

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

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

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

由于图标没有被禁用，所以它有效。

Answer 3

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

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

Answer 4

按照其他人的建议在按钮中的垫图标内添加工具提示只有当您将鼠标悬停在图标而不是按钮上时才会起作用。取而代之的是，您可以将按钮包裹在另一个没有任何 css 类的 div 周围，只是工具提示。

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

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

Answer 5

试试这个：

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

Answer 6

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

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

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

Answer 7

我找到解决办法了！

像这样将工具提示放入按钮内容中：

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

Answer 9

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

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

Answer 10

角和角材料 15

您可以将

matTooltip

添加到子元素，最合乎逻辑的是在材质按钮的情况下，

span

包含按钮文本或

mat-icon

带有材质图标。

当使用 Material 按钮时，禁用的按钮默认应用样式

pointer-events: none

；查看按钮的全局材质样式：

图标按钮：

.mdc-icon-button:disabled,
.mat-mdc-icon-button[disabled] {
  pointer-events: none;
}

普通按钮：

.mdc-button[disabled],
.mat-mdc-button[disabled] {
  pointer-events: none;
}

如果您希望在悬停按钮时显示工具提示，则需要为子元素取消此设置。这可以像这样轻松解决：

<button #myIconButton mat-icon-button [disabled]="!isAllowedDelete">
  <mat-icon [style.pointer-events]="'all'"
            matTooltip="You are not allowed to delete this item"
            [matTooltipDisabled]="myIconButton.disabled">delete</mat-icon>
</button>

<button #myButton mat-button [disabled]="!isAllowedDelete">
  <span [style.pointer-events]="'all'"
        matTooltip="You are not allowed to delete this item"
        [matTooltipDisabled]="myButton.disabled">delete</span>
</button>

或者如果你想在你的样式表中使用它：

button[disabled] span.mat-mdc-tooltip-trigger
button[disabled] mat-icon.mat-mdc-tooltip-trigger {
  /* Allows for tooltips to be triggered on disabled buttons */
  pointer-events: all;
}

在我看来，这比将按钮包装在元素中更好，您现在可以使用按钮“禁用”状态 (

myButton.disabled

) 直接禁用/启用工具提示，并且您不需要添加任何额外的包装器或元素DOM.

Answer 11

不仅

matTooltip

，甚至

title

属性在禁用按钮上也不起作用。

只需在其包含的 div 上添加工具提示，而不是在按钮本身上。

<div title="Some tooltip message">
  <button type="button" [disabled]="!enable()">My Button</button> 
</div>