angular bootstrap tooltip破坏按钮组

Question

我正在尝试在按钮组的每个按钮中添加angular-bootstrap工具提示.当我这样做时,悬停右键会破坏所有按钮样式.

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!';
});

这是我的傻瓜:http://plnkr.co/edit/NFjJJXEKyJHDgddcPdNa?p=preview

Answer 1

这是因为你的工具提示是在btn-group内生成的.这意味着"右"按钮不再是组中的最后一个元素,因此样式会发生变化,直到工具提示消失.尝试将工具提示附加到正文,而不是父级.

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