Search code examples
javascripthtmlcssangularsyncfusion

Disable tooltip text if button is disabled in angular

I'm new to UI, I have requirement for my angular application, where my button will be enabled and disabled on some conditions. I want to show tooltip only if button is enabled, I'm able to change cursor type on enable/disabled button, but want to know how can I enable the tooltip text only if my button is enabled, below is my code.

<button ejs-button type="button" (click)="formulabuilder(data) [attr.disabled]="data.disable==true?'':null"  
        title="Formula Builder" class="formula_builder_btn">
    <mat-icon role="img" class="mat-icon material-icons mat-icon-no-color"> apps</mat-icon>
</button>

.formula_builder_btn:disabled {
  cursor: default;
}

.formula_builder_btn{
  cursor: pointer;
}

Is am I doing anything wrong? how can I achieve this.

Solution

  • You can conditionally add the title

    <button ejs-button type="button" title="{{ data.disable? '' : 'Formula Builder'}}">