I want to show suggestion tooltip on focus of ion-input using ionic angular

Question

In below code, Password suggestion tooltip is open when keydown event is fire.But i want show suggestion tooltip on focus of ion-input element.

HTML

<label class="ci-ter-head ci-opc-50 ci-required">Password</label>
                              <ion-input type="{{feildType}}"  class="inputField" onFocus="passwordKeydown($event, 'signUpForm')"  [ngClass]="{'close-icon': validationVaribles.errorIconPassword, 'right-icon' : validationVaribles.successIconPassword }" [(ngModel)]="userSignUpInfo.password"
                              class="ci-form-field ci-sec-head">
                              <span *ngIf="!platform.is('ios')" [hidden] = "shPassword" (click)="showPassword($event);" style="margin-right: 5px;height: 28px;"><img src="../../assets/images/show.svg" height="28"></span>
                              <span *ngIf="!platform.is('ios')" [hidden] = "!shPassword" (click)="showPassword($event);" style="margin-right: 5px;height: 28px;"><img src="../../assets/images/hide.svg" height="28"></span>
                              </ion-input>
                              <div [ngClass]="commonService.onResize() ? 'ci-box-shadow' : 'ci-box-shadow'" *ngIf="passwordcomplexityHidden && userSignUpInfo.password != ''">
                                <ul>
                                  <li *ngIf="passwordcomplexity.isMinLen == false" class="ci-pt-5 ci-pb-5 ci-pl-10">- Be at least eight characters long</li>
                                  <li *ngIf="passwordcomplexity.isCapital == false" class="ci-pt-5 ci-pb-5 ci-pl-10">- Contain at least one uppercase letter </li>
                                  <li *ngIf="passwordcomplexity.isSmall == false" class="ci-pt-5 ci-pb-5 ci-pl-10">- Contain at least one lowercase letter</li>
                                  <li *ngIf="passwordcomplexity.isNumber == false" class="ci-pt-5 ci-pb-5 ci-pl-10">- Contain at least one numbers</li>
                                  <li *ngIf="passwordcomplexity.isSpecial == false" class="ci-pt-5 ci-pb-5 ci-pl-10">- Contain at least one special character</li>
                                </ul>
                              </div>

lda573 · Accepted Answer · 2021-09-13 16:49:57Z

0

use ionFocus to set a property to show hide tooltip <-> *ngIf, you should mention what ionic version do you use.

.html

<ion-input type="password" [(ngModel)]="password" (ionFocus)="focus()" (ionBlur)="focusOut()"></ion-input>

.ts

focus(){
  this.showTooltip = true;
}

focusOut(){
  this.showTooltip = false;
}

edited Sep 13, 2021 at 16:49

answered Sep 13, 2021 at 16:35

lda573

988 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I want to show suggestion tooltip on focus of ion-input using ionic angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related