Update. I inspected that control and finally noticed the typo.

But I'm wondering from where this tooltip comes from? I noticed the same tooltip (with slightly different message) on other controls which are invalid.


Hi everybody,

I have the following markup:

<div class="form-group">
                    <label class="control-label col-md-2 col-lg-2">@Labels.totalUses: </label>
                    <div class="col-md-4 col-lg-4">
                        <input type="number" class="form-control"
                               name="totalUses"
                               id="totalUses"
                               placeholder="0"
                               min="-999"
                               max="9999"
                               data-sm:number-format
                               data-sm:number
                               ng-model="currentItem.valTmpl.vTotUse">
                        
                        <div class="field-validation-error">
                            <span ng-show="(form.editItemValidationForm.totallUses.$error.min || form.editItemValidationForm.totallUses.$error.max) 
                                  && form.editItemValidationForm.totallUses.$dirty">
                                @String.Format(Messages.mustBeBetweenXandY, Labels.totalUses, "-999", "9999")
                            </span>
                        </div>
                    </div>
                    
                    <div class="checkbox col-md-4 col-lg-4" style="margin-top: -7px;">
                        <label class="control-label">
                            <input type="checkbox" ng-model="currentItem.valTmpl.vMultival">  @Labels.multipleValidations
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2 col-lg-2">@Labels.usesPerDay: </label>
                    <div class="col-md-4 col-lg-4">
                        <input type="number" class="form-control"
                               name="dayUse"
                               id="dayUse"
                               placeholder="0"
                                min="-999"
                                max="9999"
                               data-sm:number-format
                               data-sm:number
                               ng-model="currentItem.valTmpl.vDayUse">
                        <div class="field-validation-error">
                            <span ng-show="(form.editItemValidationForm.dayUse.$error.min || form.editItemValidationForm.dayUse.$error.max)
                                  && form.editItemValidationForm.dayUse.$dirty">
                                @String.Format(Messages.mustBeBetweenXandY, Labels.usesPerDay, "-999", "9999")
                            </span>
                        </div>
                    </div>
                    <div class="checkbox col-md-6 col-lg-6">
                        <label class="control-label">
                            <input type="checkbox" ng-model="currentItem.valTmpl.vNoDiscnt">@Labels.doNotIncrementDiscCounter
                        </label>
                    </div>
                </div>

All controls except for total uses behave correctly - as soon as I type a number which is too big, I can see red error message beneath that control.

But the first total uses control only shows error when I go to the next control (e.g. control loses focus) and the error message is show as a tooltip instead of the red validation error.

Do you know what may be responsible for that difference? The HTML markup looks very similar to me.

I'll check the model in the meantime, may be it has the attributes and they are interfering.