How to enable Bootstrap Tooltip on disabled button using AngularJS?

Question

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

Answer 1

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