如果按钮在 angular 中被禁用，则禁用工具提示文本

Question

我是 UI 的新手，我对我的 angular 应用程序有要求，我的按钮将在某些情况下启用和禁用。我只想在启用按钮时显示工具提示，我可以在 enable/disabled 按钮上更改光标类型，但想知道如何仅在启用按钮时启用工具提示文本，下面是我的代码。

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

我做错了什么吗？我怎样才能做到这一点。

Answer 1

您可以有条件地添加标题

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

Answer 2

我们已经检查了您报告的要求，我们可以使用 CSS 样式来实现您的要求。我们通过 CSS 将禁用元素（按钮）的指针事件设置为 none。请参考代码片段。

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

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

为了您的参考，我们在此基础上准备了一个示例，请参考下面link。

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

如果您需要任何进一步的帮助，请告诉我们。

此致，莫汉·库马尔 R

如果按钮在 angular 中被禁用，则禁用工具提示文本

Disable tooltip text if button is disabled in angular

html

javascript

css

syncfusion

angular