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

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

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/43391568/how-to-add-a-tooltip-on-inputbox-dynamicaly-in-angular-2

标签

angular

hover

tooltip

inputbox