Angular Material：如何为禁用按钮添加matTooltip提示

这个问题其实挺常见的，根源在于浏览器会忽略禁用元素上的所有鼠标事件——也就是说，当按钮被标记为禁用时，鼠标移上去的动作根本触发不了matTooltip的显示逻辑，自然就看不到提示了。下面给你两种简单可行的解决方案：

方法一：用容器包裹按钮，将Tooltip绑定到容器上 #

把禁用按钮放在一个inline-block的容器里，然后把matTooltip指令移到容器上。这样容器能正常接收鼠标事件，Tooltip就能正常显示，而按钮依然保持禁用状态：

<div matTooltip="You cannot delete that" style="display: inline-block;">
  <button mat-raised-button [disabled]="true">
    <mat-icon>delete</mat-icon>
  </button>
</div>

方法二：强制启用按钮的鼠标事件 #

通过CSS的pointer-events: auto强制让禁用按钮接收鼠标事件，这样matTooltip就能正常触发了。不用担心按钮会被意外点击——禁用状态的按钮本身是不会响应click事件的，只是现在能接收鼠标hover事件了：

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

两种方法都能解决问题，你可以根据自己的布局需求选择～

内容的提问来源于stack exchange，提问作者Marcin Kunert