Как отобразить всплывающую подсказку в угловом шаблоне (.html), только если кнопка отключена?

Question

это моя кнопка:

 <div class="top-left">
      <button [disabled]="receiptItems?.length>0" type="button" data-tooltip="tooltip"  title="Show tooltip!" class="btn xbutton-square" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>
    </div>

Так что, если он отключен, я бы хотел показать подсказку, чтобы пользователь мог понять, почему он отключен. Мне интересно, как мне этого добиться?

Спасибо, ребята Приветствия

Answer 1

Вы можете использовать то же условие отключения для title, как это -

[title]="!receiptItems?.length ? 'my tooltip!' : ''"

на кнопке Вот так -

  <button [disabled]="receiptItems?.length>0"  [title]="!receiptItems?.length ? 'my tooltip!' : ''">...</button>

Answer 2

 <div class="top-left" *ngIf="receiptItems?.length>0">
      <button disabled  type="button" data-tooltip="tooltip"  title="Show tooltip!" class="btn xbutton-square" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw" title="Show tooltip!"></i></button>
    </div>

 <div class="top-left" *ngIf="receiptItems?.length <= 0">
      <button type="button" data-tooltip="tooltip"  title="Show tooltip!" class="btn xbutton-square" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>
    </div>

Answer 3

Используйте [attr.title], а затем используйте if else, как вы используете в [disabled]

  <button [disabled]="receiptItems?.length>0"  [attr.title]="receiptItems?.length>0 ? 'Show tooltip!' : ''">...</button>

Редактировать!

использовать [title] вместо [attr.title] тоже работает!