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

score 2 · Accepted Answer · answered Apr 13 '17 at 11:58

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

score 1 · Answer 2 · answered Apr 13 '17 at 12:05

1

Define one Boolean variable

responseType:boolean:false;

Then Set variable in your ServiceCall Method

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

HTML:

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

answered Apr 13 '17 at 12:05

Sandip - Frontend Developer

14,397
4
35
61

score 0 · Answer 3 · answered Apr 13 '17 at 11:58

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

How to add a tooltip on inputbox dynamicaly in angular 2

3 Answers3

Linked