How to enable Bootstrap Tooltip on disabled button using AngularJS?

前端未结

关注

 3  1665

灰色年华

I need to display a tooltip on a disabled button and remove it if it is enabled using AngularJS.

相关标签:

3条回答

渐次进展

2021-01-21 15:07
You can use these properties to enable/disable tooltips
```
$('[rel=tooltip]').tooltip('disable') // Disable tooltips
$('[rel=tooltip]').tooltip('enable')  // (Re-)enable tooltips
```
Now you can use something like
```
$('[rel=tooltip]').tooltip('if button active' ? 'disable' :'enable')
```
Now to do all this in angular just create a $scope.btnValid variable (if using angularjs 1) and pass it to ng-disabled property. This value will change as you want from some function

Now just use this value to enable/disable your tooltip like this
```
$('[rel=tooltip]').tooltip($scope.btnValid ? 'disable' :'enable')
```
Hope this helps
0 讨论(0)
发布评论:

提交评论
- 加载中...

心在旅途

2021-01-21 15:08

you can try this below code,

        <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>

demo : http://plnkr.co/edit/Hh1kH7HLatrQj76gFQ2E?p=preview

0 讨论(0)

盖世英雄少女心

2021-01-21 15:19

Assuming you're using 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>

0 讨论(0)