【问题标题】:angular bootstrap tooltip destroys button-group角度引导工具提示会破坏按钮组
【发布时间】:2014-11-25 13:31:56
【问题描述】:

我正在尝试在按钮组的每个按钮中添加 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

【问题讨论】:

    标签: angularjs angularjs-directive tooltip angular-bootstrap


    【解决方案1】:

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

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

    【讨论】:

    • 好吧,大部分情况下都可以,但是当按钮组放在modal中时,就不行了。
    • 我认为它与模态无关,因为它也在正常视图中发生。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-04-04
    • 2023-04-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多