[英]How can I show a tooltip in Angular template (.html) only if a button is disabled?
this is my button: 这是我的按钮:
<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>
So in case it is disabled I would like to show a tooltip so user can see why it's disabled. 因此,如果它被禁用,我想显示一个工具提示,以便用户可以查看为什么被禁用。 I'm wondering how can I achieve this? 我想知道如何实现这一目标?
Thanks guys Cheers 谢谢大家的欢呼
Use [attr.title]
and then use if
else
like you use in [disabled]
使用[attr.title]
然后用if
else
喜欢你在使用[disabled]
<button [disabled]="receiptItems?.length>0" [attr.title]="receiptItems?.length>0 ? 'Show tooltip!' : ''">...</button>
Edit! 编辑!
use [title]
instead of [attr.title]
is also work ! 用[title]
代替[attr.title]
也可以!
You can use the same conditon of disable for title
like this - 您可以使用相同的条件禁用title
例如:
[title]="!receiptItems?.length ? 'my tooltip!' : ''"
on button Like this - 像这样-
<button [disabled]="receiptItems?.length>0" [title]="!receiptItems?.length ? 'my tooltip!' : ''">...</button>
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.