AngularJS在输入字段上正式添加工具提示

Question

我正在尝试在输入字段上添加工具提示，但这不起作用。使用templateOptions和tooltip可以在标签上添加工具提示，但不能在输入字段上添加工具提示，我也尝试了templateOptions中的title，但是不起作用。

{
   key: 'minimumPerson',
   type: 'horizontal-input',
   className: 'tooltipLabel',
   templateOptions: {
      label: 'Minimum Person *',
      placeholder: '0',
      type: 'number',
      tooltip: '<h4>Test</h4>',
      tooltipClass: 'wide-tooltip',
      title: '<h4>Test</h4>'

   }
}

有人知道我可以解决这个问题吗？

Answer 1

这可以使用Bootstrap完成

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-xs-6" style="background:red">
<input type="text" data-toggle="tooltip" data-placement="bottom" title="type here"/>
                            
                            <button data-toggle="tooltip" data-placement="right" title="click here" class="btn-primary  red-tooltip m-r-10 pull-left"   style="  ">
                                click here
                            </button>
                        </div>