How can I change generic tool tip in HTML5 for input angular form field

Hi,
I am using Angular2 form. Mostly all validated using html pattern and some are form validated. For html validation, I am getting generic tooltip "Please enter a valid format" for phone without saying the format. How can I change it to "Please enter 10 numeric values."

HTML Code

   <div class="row form-group">
             <div class="col-xs-12">
                <div class="float-label active">
                      <input type="text" class="input-underline-blue" id="phone" formControlName="phone"
                       placeholder="(123) 345-2222"
                        (keydown)="numOnlyDown($event)"
                         (keyup)="numOnlyUp($event)"
                             (blur)="phoneUSFormat($event)"
                            [maxlength]="14"
                         pattern="(?:\([1-9]\d{2}\)|\d{3})[- ]?\d{3}[- ]?\d{4}"              
                         required />
     <label for="phone">@Html.Sitecore().Field("Phone Label", profileItem)</label>
    <div *ngIf="!editInfoForm.get('phone').valid" class="alert alert-danger alert-small">
     <span *ngIf="editInfoForm.get('phone').hasError('required')">
                                                        @Html.Sitecore().Field("Phone Required", profileItem)
      </span>
      <span *ngIf="!editInfoForm.get('phone').hasError('required') && !editInfoForm.get('phone').valid">
      Enter a valid phone number.
         </span>
         </div>
   </div>
      </div>
   </div>