Question

我需要在禁用按钮上显示工具提示，如果使用AngularJS启用它，则将其删除。

Answer 1

假设你正在使用angular-ui-bootstrap：

http://plnkr.co/edit/vA7sizeDWwyC7KxeuGel?p=preview

<body ng-controller="MainCtrl" ng-app="plunker">
  <div style="height:100px"></div>
  <div uib-tooltip="asdsad" tooltip-enable="disableButton" style="display:inline-block">
    <button ng-disabled="disableButton" ng-style="{'pointer-events':disableButton ? 'none' : ''}">Hover over me!</button>
  </div>
  <br>Check the checkbox to disable the button <input type="checkbox" ng-model="disableButton">
</body>

Answer 2

您可以使用这些属性启用/禁用工具提示

$('[rel=tooltip]').tooltip('disable') // Disable tooltips
$('[rel=tooltip]').tooltip('enable')  // (Re-)enable tooltips

现在你可以使用像

这样的东西

$('[rel=tooltip]').tooltip('if button active' ? 'disable' :'enable')

现在以角度来做所有这些只需创建一个$ scope.btnValid变量（如果使用angularjs 1）并将其传递给ng-disabled属性。此值将根据您的需要从某个函数

更改

现在只需使用此值启用/禁用此工具提示

$('[rel=tooltip]').tooltip($scope.btnValid ? 'disable' :'enable')

希望这有帮助

Answer 3

您可以尝试以下代码，

        <div class="tooltip-wrapper" ng-repeat="item in itemDetails" title="
          {{item.name + (isDisabled(item.name)?' is not available' : '')}}">
         <button ng-disabled="isDisabled(item.name)" class="btn btn-primary" 
           ng-click="select(item)">{{item.name}}</button>
       </div>

演示：http://plnkr.co/edit/Hh1kH7HLatrQj76gFQ2E?p=preview

如何使用AngularJS启用禁用按钮上的Bootstrap Tooltip？

3 个答案: