To show small tooltip(bootstrap) as validation if the pattern is not matched in angular 2

See more:

bootstrap

<div #dataContainer class="infills form-group richtextbox textarea {{field.groupid}}" contentEditable="true" id="{{field.id}}" name="{{field.id}}"
                        *ngIf="(field.fieldtype=='textarea' && field.id!='COURTNAMEFULL' );"
                        [ngStyle]="{'position':'absolute','top':field.y+'px','left':field.x+'px','font-size':'12px','font-family':'Courier New','height':field.height+'px','width':field.width+'px','background':'#EEE'}"
                        [(ngModel)]="field.value" title="{{field.description}}" 
                        (dblclick)="openFullRTE(field.id)"
                        (keypress)="_keyPress($event, field.pattern,field.id)"
                        (focusout)="field.htmlContent=CheckandPassData(dataContainer.innerHTML,field.pattern,dataContainer.innerText);"
                        [ngModelOptions]="{standalone: true}" (ngModelChange)="FieldCalculations(field.id,field.groupid)" >
                        </div>

Here, pattern validation is done at keypress event. I need to show a small bootstrap tooltip(as:"enter only in digits") when the pattern is not matched.

What I have tried:

Created a span to show warning message if pattern is wrong. Created using alert class in bootstrap like below:

<span *ngIf="warningFlag===true && field.id===fid" class="alert alert-warning fade in" [ngStyle]="{'position':'absolute','top':(field.y-50)+'px','left':(field.x-20)+'px','z-index': 1}">
                             Only digits are allowed!
                        </span>