앵귤러 부트 스트랩 툴팁이 버튼 그룹을 파기합니다.

Question

버튼 그룹의 각 버튼에 앵귤러 부트 스트랩 툴팁을 추가하려고합니다. 이렇게하면 오른쪽 버튼을 가리키면 모든 버튼 스타일이 파괴됩니다.

HTML :

<div class="btn-group" style="margin-top:100px;"> 
     <label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Left'">Left</label> 
     <label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Middle'">Middle</label> 
     <label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Right'">Right</label> 
    </div> 

JS :

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope) { 
    $scope.dynamicTooltip = 'Hello, World!'; 
}); 

여기 내 plunker이다 : 당신의 툴팁이 BTN 그룹 내에서 발생하기 때문에 http://plnkr.co/edit/NFjJJXEKyJHDgddcPdNa?p=preview

Answer 1

그건가. 즉, 툴팁이 사라질 때까지 스타일이 변경되기 때문에 더 이상 '오른쪽'버튼이 그룹의 마지막 요소가 아닙니다. 툴팁을 부모가 아닌 본문에 추가해보십시오.

<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" tooltip-append-to-body="true" ng-model="radioModel" btn-radio="'Right'">Right</label>