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

Question

I've set an mdl-tooltip on a button. When the mouse hovers over the button, tooltip is displayed correctly. When the mouse leaves the button, tooltip disappears correctly.

When button is clicked, button is disabled and the tooltip remains displayed. How do I fix this such that the tooltip is hidden when the button is clicked/disabled?

<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

Answer 1

pointer events are not fired on disabled elements. (have a look for a discussion on that topic: Event on a disabled input )

you can change your code in this way to make possible what you are trying to do:

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

(see also: https://github.com/mseemann/angular2-mdl/issues/535 )