CODEWITHSUNDEEP
angularhovertooltipinputbox
Er Vipin Sharma
Er Vipin Sharma

Reputation: 2639

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

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

Upvotes: 2

Views: 14615

Answers (3)

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14669

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

Upvotes: 1

Fabien
Fabien

Reputation: 372

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

Upvotes: 2

Dmitrij Kuba
Dmitrij Kuba

Reputation: 1038

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

Upvotes: 0

Related Questions