角形ラベルにツールチップを追加するにはどうすればよいですか？

Question

ラベルの横にあるボタンを追加すると、そのラベルに関連するツールチップが表示されます（ここではInfo button next to label）。 1つの方法は、フォームコンポーネントとしてボタンを作成し、各コンポーネントの後に追加し、cssを使用してラベルの横に配置することです。私はより良い解決策を探しています。 フィドルを追加していません。ここに行くことができますhttp://angular-formly.com/#/example/intro/introduction。

Answer 1

ここに行く：http://jsbin.com/qexekeg/5/edit?html,js,output

ステップ1：ラッパーテンプレートの使用角度-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：追加ラッパー

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

ステップ2を作成します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; 
}