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]

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

编辑！

使用[title]代替[attr.title]也可以！

Answer 2

您可以为title使用相同的禁用条件-

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

在按钮上这样-

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

Answer 3

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

仅当禁用按钮时，如何才能在Angular模板（.html）中显示工具提示？

3 个答案: