如何在angular 2中添加inputbox dynamicaly上的工具提示 [英] 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： $ b

app.component.ts:

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

推荐答案

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

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

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