CODEWITHSUNDEEP
cssangularbootstrap-4
developer
developer

Reputation: 1697

Show validation error as tooltip on hover of icon in Angular

I am using bootstrap (4.5) validation inside an Angular application. It works fine, it shows the error icon within the textbox and error message under the textbox. How can I change it to show the error message as tooltip when hovering over the error icon within the textbox? I do not want to show the error message under the textbox.

Login form

Code:

     <form #loginForm="ngForm" (ngSubmit)="login(loginForm)">
      <div class="form-group">
        <label>User Name</label>
        <input type="text" name="name" class="form-control" [(ngModel)]="userName" #name="ngModel" [ngClass]="{ 'is-invalid': loginForm.submitted && name.invalid }"
          required>
        <div class="invalid-feedback" *ngIf="loginForm.submitted && name.invalid">
          <p *ngIf="name.errors.required">User Name is required</p>
        </div>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" name="password" [(ngModel)]="pwd" #password="ngModel"
          [ngClass]="{ 'is-invalid': loginForm.submitted && password.invalid }" required>
        <div *ngIf="loginForm.submitted && password.invalid" class="invalid-feedback">
          <div *ngIf="password.errors.required">Password is required</div>
        </div>
        <div>
          <a href="#">Forgot password?</a>
        </div>
      </div>
      <div class="form-group m-0">
        <button type="submit" class="btn btn-secondary btn-block">
          Login
        </button>
      </div>
    </form>

Upvotes: 0

Views: 4099

Answers (1)

John Malkoln
John Malkoln

Reputation: 461

Error icon in bootstrap 4.5 is implemented as a background image. So you can't attach a tooltip to it.

The simplest solution is to show tooltip on input's hover. But to achieve your goal we can add transparent background with an area that overlaps the error icon.

Template:

<div class="form-group">
    <label>User Name</label>
    <div class="form-control-wrapper">
        <input type="text" name="name" class="form-control" [(ngModel)]="userName" #name="ngModel" [ngClass]="{ 'is-invalid': loginForm.submitted && name.invalid }" required>
        <span
            *ngIf="loginForm.submitted && name.invalid"
            class="error-icon-hover-area"
            data-toggle="tooltip"
            data-placement="right"
            title="User Name is required"
        ></span>
    </div>
</div>

Styles:

.form-control-wrapper {
    position: relative;
}

.error-icon-hover-area {
    position: absolute;
    background-color: transparent;
    width: 40px;
    height: 100%;
    top: 0;
    right: 0;
}

Note, I've used twitter bootstrap tooltip, but you can use your own.

Upvotes: 1

Related Questions