I need to display a tooltip on a disabled button and remove it if it is enabled using AngularJS.
Add a comment
|
3 Answers
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>
1 Comment
Fissio
Updated the fiddle to work on chrome - added a wrapping div element for the button @ErtuğrulAltınboğa
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
Comments
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>
