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

【问题标题】：How to add a tooltip on inputbox dynamicaly in angular 2如何在角度2中动态地在输入框上添加工具提示
【发布时间】：2017-09-09 12:50:05
【问题描述】：

我有一个输入框，我想在输入框悬停时显示一条工具提示消息，这将基于我们从服务获得的响应。如果服务响应为“真”，则工具提示中的消息将为“真消息”，如果服务返回假，则该消息将为“假消息”。

这是我的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 
}
}

【问题讨论】：

标签： angular hover tooltip inputbox

【解决方案1】：

您可以使用 title="My tooltip" 标签为按钮添加一些工具提示。

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

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

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

tt: string;

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

【讨论】：

【解决方案2】：

定义一个布尔变量

responseType:boolean:false;

然后在您的 ServiceCall 方法中设置变量

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

HTML：

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

【讨论】：

【解决方案3】：

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

【讨论】：