角引导提示破坏按钮组 [英] angular bootstrap tooltip destroys button-group

问题描述

我想补充的角度，引导提示的按钮组的每个按钮。当我这样做，徘徊右键销毁所有按钮样式。

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

下面是我的plunker： http://plnkr.co/edit/NFjJJXEKyJHDgddcPdNa？ p = preVIEW

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

推荐答案

这是因为你的工具提示的BTN-组中产生。这意味着右按钮不再是组中的最后一个元素，如直到工具提示消失这样的样式的变化。尝试附加工具提示的身体，而不是父母。

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>

这篇关于角引导提示破坏按钮组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！