javascript - 仅当禁用按钮时，如何才能在 Angular 模板 (.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

使用 [attr.title] 然后使用 if else 就像你在 [disabled] 中使用的那样/p>

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

编辑!

使用 [title] 而不是 [attr.title] 也可以!