Question

我有一个输入框，我想在输入框上悬停时显示工具提示消息，这将基于我们从服务获得的响应。如果服务响应为真，则工具提示中的消息将为＆＃34;真正的消息＆＃34;如果服务返回false，则消息将为＆＃34; false message＆＃34;。

这是我的 app.component.html：

<div class="col-sm-8">
    <input class="form-control"
           type="text"
           [(ngModel)]="user.FormName">

          <button type="btn">Servicecall()</button>
</div>

app.component.ts：

Servicecall(){
  if(serviceCallresponseIstrue)   
      //  success message on tooltip
  else {
      // error message on tooltip 
}
}

Answer 1

定义一个布尔变量

responseType:boolean:false;

然后在 ServiceCall方法

中设置变量

Servicecall(response){
    //response will be true/false
    this.responseType=response;
}

<强> HTML：

<input type="text" title="{{responseType}} message" />

Answer 2

<强> app.component.html：

<div class="col-sm-8">
  <input class="form-control"
       type="text"
       [(ngModel)]="user.FormName">

  <div *ngIf="tooltip">Tooltip</div>

  <button type="btn" (click)="Servicecall()">Send</button>
</div>

<强> app.component.ts：

let tooltip: boolean = false;    

Servicecall(){
  if(serviceCallresponseIstrue) {
    tooltip = true;
  } else {
    tooltip = false;
  }
}

Answer 3

您可以使用title =“我的工具提示”标记为按钮添加一些工具提示。

现在，您可以使用模板创建动态工具提示：

<button title="{{tt}}"></button>

在ts代码中设置工具提示：

tt: string;

Servicecall(){
  if(serviceCallresponseIstrue)   
      this.tt = "True tooltip";
  else {
      this.tt = "False tooltip"; 
  }
}

如何在角度2中动态添加输入框上的工具提示

3 个答案: