CODEWITHSUNDEEP
javascripthtmlcssangulartooltip
Roxy'Pro
Roxy'Pro

Reputation: 4444

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

Upvotes: 1

Views: 847

Answers (3)

לבני מלכה
לבני מלכה

Reputation: 16251

Use [attr.title] and then use if else like you use in [disabled]

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

Edit!

use [title] instead of [attr.title] is also work !

Upvotes: 2

Pardeep Jain
Pardeep Jain

Reputation: 86750

You can use the same conditon of disable for title like this -

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

on button Like this -

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

Upvotes: 0

Daniel Segura P&#233;rez
Daniel Segura P&#233;rez

Reputation: 1117

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

Upvotes: 0

Related Questions