如何使用angular js在工具提示中的输入字段的右侧显示验证错误消息？

Question

我有表单，其中包含一些字段，并通过使用angular.validator验证这些字段。错误消息显示在每个字段下。但我想用工具提示显示这个错误信息。例如，如果某些特定字段无效，则应在字段框右侧显示错误消息。我没有找到来自其他帖子的解决方案。这个怎么做 ？

我想在工具提示中显示此字段是必需的。 （通过指示）。

<div class="form-group"> 
       <label for="inputPassword3" class="col-sm-3 control-label">Contact No</label> 
       <div class="col-sm-8"> 
       <input type="text" ng-model="proFormSubmit.contactNo" validator="[required, number]" class="form-control" id="" placeholder="" validation-message="Only numeric values are valid!"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputPassword3" class="col-sm-3 control-label">Profile Picture</label> 
       <div class="col-sm-8 companyLogo"> <img src="assets/img/user.png" alt="..." class="img-rounded col-sm-3 "> 
       <input type="file" id="exampleInputFile" ng-model="proFormSubmit.profilePic"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputEmail3" class="col-sm-3 control-label">Language</label> 
       <div class="col-sm-8"> 
       <select class="form-control" ng-model="proFormSubmit.language" validator="[required]"> 
        <option></option> 
        <option value="english">English</option> 
        <option value="spanish">Spanish</option> 
       </select> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputPassword3" class="col-sm-3 control-label">Address 1</label> 
       <div class="col-sm-8"> 
       <input type="text" ng-model="proFormSubmit.address1" validator="[required]" class="form-control" id="" placeholder=""> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputPassword3" class="col-sm-3 control-label">Address 2</label> 
       <div class="col-sm-8"> 
       <input type="text" ng-model="proFormSubmit.address2" validator="[required]" class="form-control" id="" placeholder=""> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputPassword3" class="col-sm-3 control-label">City</label> 
       <div class="col-sm-8"> 
       <input type="text" ng-model="proFormSubmit.city" validator="[required]" class="form-control" id="" placeholder=""> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputEmail3" class="col-sm-3 control-label">State</label> 
       <div class="col-sm-8"> 
       <select class="form-control" ng-model="proFormSubmit.state" validator="[required]"> 
        <option></option> 
        <option value="Indonesia">Tamilnadu</option> 
        <option value="Indonesia">Kerala</option> 
        <option value="Indonesia">Rajasthan</option> 
       </select> 
       </div> 
      </div> 

Answer 1

我用http://angular-ui.github.io/bootstrap具有$ tooltipProvider，允许你修改工具提示的行为。除此之外，这看起来像一个CSS + ng显示候选