禁用按钮时，angular2-mdl 工具提示卡住答案

【问题标题】：angular2-mdl tooltip gets stuck when disabling button禁用按钮时，angular2-mdl 工具提示卡住
【发布时间】：2017-03-22 14:55:43
【问题描述】：

我在按钮上设置了 mdl-tooltip。当鼠标悬停在按钮上时，工具提示会正确显示。当鼠标离开按钮时，工具提示正确消失。

当按钮被点击时，按钮被禁用并且工具提示仍然显示。如何解决此问题，以便在单击/禁用按钮时隐藏工具提示？

<button type="button" mdl-button mdl-button-type="icon" mdl-colored="primary" mdl-ripple mdl-tooltip="Disable Button" mdl-tooltip-position="bottom" (click)="isDisabled = true" [disabled]="isDisabled">
    <mdl-icon>close</mdl-icon>
  </button>

plunker：http://plnkr.co/edit/vGw8W93jR0j6qzHCyASS?p=preview

【问题讨论】：

标签： angular2-mdl

【解决方案1】：

指针事件不会在禁用元素上触发。（查看有关该主题的讨论：Event on a disabled input）

您可以通过这种方式更改您的代码，以实现您想要做的事情：

   <span mdl-tooltip="blah">
      <button mdl-button  mdl-button-type="fab" mdl-colored="primary" 
        [disabled]="itemDisabled" (click)="itemDisabled=!itemDisabled">
        <mdl-icon>add</mdl-icon>
      </button>
   </span>

（另见：https://github.com/mseemann/angular2-mdl/issues/535）

【讨论】：