如何在角度2中动态地在输入框上添加工具提示 [英] How to add a tooltip on inputbox dynamicaly in angular 2

问题描述

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

I have an input box and I want to show a Tooltip message on hover on input box, which will be based on the response we get from service. If service response is 'true', the message in tooltip will be "true message" and if service returns false then the message will be "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 
}
}

推荐答案

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

You can add some tooltip to a button using the title="My tooltip" tag.

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

Now, you can create a dynamic tooltip using a template:

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

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

And setting the tooltip in your ts code :

tt: string;

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

这篇关于如何在角度2中动态地在输入框上添加工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！