如何在 angular 2 中动态地在输入框上添加工具提示

Question

我有一个输入框，我想在悬停在输入框上时显示一条工具提示消息，这将基于我们从服务获得的响应。如果服务响应为 'true'，则工具提示中的消息将为 "true message"，如果服务为 returns false，则消息将为 "false message"。

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

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 2

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

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

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

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

tt: string;

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

Answer 3

定义一个布尔变量

responseType:boolean:false;

然后在 ServiceCall 方法中设置变量

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

HTML:

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

如何在 angular 2 中动态地在输入框上添加工具提示

How to add a tooltip on inputbox dynamicaly in angular 2

tooltip

hover

inputbox

angular