如何將工具提示添加到角形標籤？

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步：使用角度-UI-引導在包裝模板提示指令

<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; 
}