Question

我想在标签旁边添加一个按钮，在悬停时会显示与该标签相关的工具提示（如此处Info button next to label所示）。一种方法是创建一个按钮作为一个formly组件，并在每个组件后添加它，并使用css将它放在标签旁边。我正在寻找更好的解决方案。没有添加小提琴。你可以去http://angular-formly.com/#/example/intro/introduction。

Answer 1

在这里：http://jsbin.com/qexekeg/5/edit?html,js,output

第1步：创建包装器

formlyConfigProvider.setWrapper({
      name: 'bootstrapLabel',
      overwriteOk: true, //as we are overwriting original bootstrapLabel wrapper
      templateUrl: 'tooltip-wrapper.html'
    });

步骤2：在包装模板中使用angular-ui-bootstrap tooltip指令

<script type="text/ng-template" id="tooltip-wrapper.html">
  <div>
  <label for="{{id}}" class="control-label {{to.labelSrOnly ? 'sr-only' : ''}}" ng-if="to.label">
    {{to.label}}
    {{to.required ? '*' : ''}}
  </label><i ng-if="to.tooltip"
             class="control-label-help glyphicon glyphicon-question-sign"
             uib-tooltip="{{to.tooltip.content}}"
             tooltip-is-open="true"></i>
  <formly-transclude></formly-transclude>
</div>
</script>

第3步：向templateOptions添加新属性。

vm.fields = [
      {
        key: 'text',
        type: 'input',
        templateOptions: {
          label: 'Text',
          placeholder: 'Formly is terrific!',
          tooltip: {
            content: "This is simple tooltip."
          }
        }
      }];

额外：添加一些CSS ...

.control-label-help {
  margin-left: 3px;
}

如何将工具提示添加到角形标签？

1 个答案: