Expected behavior

Tooltips disappear, when an element is disabled / hidden dynamically and don't stay in the UI forever.

Actual behavior

When an element is disabled dynamically, the tooltip will stay in the UI forever.Some common use case would be disabling a "save"-button when clicked while the saving process is running.

There are a lot more common use cases we're running into, and I know there are some workarounds like putting the tooltip on an outer container for cases where something could be disabled at some point, but I think there could be more elegant solutions that work consistently, doesn't need case to case decisions in the application, and would make the tooltips more stable.

Repro

    <button type="button" class="btn" mdbTooltip="Tooltip not disappearing after click" placement="top"
            (click)="onBtnClicked()" [disabled]="isDisabled">
            Disable button on click
    </button>

    @Component({
      templateUrl: './repro.component.html',
    })
    export class ReproComponent {
      public isDisabled = false;
      public onBtnClicked(): void {
        this.isDisabled = true;
      }
    }

Suggestion

Additional to the events that trigger closing (mouseleave, focusout, and so on), that are not triggered on disabled elements anymore, you could watch attribute / class changes to the element, to close the tooltip when the element gets disabled or hidden. I think in this cases the tooltip should always be hidden, the following could be added into the already existing workflow. Of course there are also other solutions to this that would also make the tooltip more stable, but I think this works quite well.

const disabledHiddenObserver = new MutationObserver(mutations => {
      if (!this._open) {
        return;
      }

      if (
        this._open &&
        (this._elementRef.nativeElement.classList.contains('disabled') || this._elementRef.nativeElement.disabled || this._elementRef.nativeElement.hidden)
      ) {
        this.hide();
      }
    });

    disabledHiddenObserver.observe(this._elementRef.nativeElement, { attributes: true });