angular bootstrap tooltip destroys button-group

Question

I'm trying to add angular-bootstrap tooltip in each button of button-group. When I do this, hovering right button destroys all buttons styles.

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

Here is my plunker: http://plnkr.co/edit/NFjJJXEKyJHDgddcPdNa?p=preview

Answer 1

It's because your tooltip is generating inside the btn-group. This means the 'Right' button is no longer the last element in the group, as such the styling changes until the tooltip disappears. Try appending the tooltip to the body, rather than the parent.

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