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

Question

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

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

<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-show候选人