각도 형식 라벨에 툴팁을 추가하는 방법은 무엇입니까?

Question

호버에서 해당 레이블과 관련된 툴팁을 표시하는 레이블 옆에 버튼을 추가하고 싶습니다 (여기에 표시된대로 Info button next to label). 한 가지 방법은 버튼을 공식 구성 요소로 생성하고 각 구성 요소 다음에 추가하고 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; 
}