Disable tooltip text if button is disabled in angular

Question

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.

Answer 1

您可以有条件地添加标题

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

Answer 2

We have checked your reported requirement, we can achieve your requirement using CSS styles. We have set the pointer event as none for the disabled element (button) through CSS. Please refer to code snippets.

<button ejs-button [isPrimary]="true" [disabled]="true" title="Formula Builder">Primary

.e-btn:disabled { pointer-events: none; }

For your reference, we have prepared a sample based on this, please refer to below link.

Link: https://stackblitz.com/edit/angular-zcgd11-qjzzns?file=app.component.css

Please let us know if you need any further assistance.

Regards, Mohan kumar R