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

Posted 2023-04-18

【中文标题】如何在角度2中动态地在输入框上添加工具提示

【英文标题】：How to add a tooltip on inputbox dynamicaly in angular 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 

【参考方案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;