В google chrome подсказка не отображается, когда кнопка отключена в angular.

Question

У меня есть проект, построенный с angular и ng- bootstrap. Я использую ngbTooltip , чтобы показать всплывающую подсказку для кнопки.

<button 
    class="btn btn-success"
    (click)="onSubmit()"
    [ngbTooltip]="tipContent"
    [disabled]="disabled">
    Save
</button>

<ng-template #tipContent>
    Please fill out all mandatory fields before saving
</ng-template>

Однако, когда переменная disabled равна true ie, когда кнопка отключена, всплывающая подсказка не отображается в Google Chrome, но работает в Firefox.

Восстановление проблемы в stackblitz

Как показать подсказку на отключенной кнопке?

Answer 1

Похоже, что ваша проблема присутствует только в некоторых браузерах (всплывающая подсказка отображается в Firefox, а не в Chrome).

Глобальным решением этой проблемы было бы обернуть кнопку в другой элемент и показать подсказку на обертке.

<span [ngbTooltip]="tipContent">
  <button type="button" class="btn btn-outline-secondary" [disabled]="disable">
      I've got markup and bindings in my tooltip!
  </button>
</span>

DEMO: https://stackblitz.com/edit/sstackoverflow-ngtooltip-7te4bd

Answer 2

@ решение Курта-Гамильтона сработало, но у него были некоторые проблемы, всплывающая подсказка появлялась внутри кнопки, и было некоторое мерцание.

Поскольку bootstrap имеет класс .disabled, я решил использовать что.

Добавлено [class.disabled]="!canSave".

Теперь код выглядит так:

<button 
    class="btn btn-success"
    (click)="onSubmit()"
    [ngbTooltip]="tipContent"
    [class.disabled]="disabled">
    Save
</button>

файл компонента:

onSubmit() {
    if (!this.canSave) {
        return;
    }
    // onSubmit code
}