How to add a tooltip on inputbox dynamicaly in angular 2

Question

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".

Here is my 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

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>

And setting the tooltip in your ts code :

tt: string;

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