AngularJS+Bootstrap-UI: Enable tooltip on button when button is disabled

Question

Please see my jsfiddle code here http://jsfiddle.net/695qtssv/2/

How can I get the button to display the tooltip while its disabled?

html

<div class="panel panel-default">
            <div  ng-repeat="item in itemDetails" tooltip="{{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>
        </div>

JS:

var myApp = angular.module('myApp', ['ui.bootstrap']);

function MyCtrl($scope) {
    $scope.myModel = "Tooltip only works when input is enabled.";
    $scope.isDisabled = false;

}

I have tried using the tooltip on a div that wraps the button but still had no luck as shown in the example.

This tooltip works with but I cannot use that in the app that I am working on.

Any help would be greatly appreciated.

Answer 1

I think disabled elements does not not fire mouse events. See Event on a disabled input

Based on above link I offer this kind of solution:

<div class="panel panel-default">
  <div  ng-repeat="item in itemDetails" style="display:inline-block; position:relative;">
    <button ng-disabled="isDisabled(item.name)" class="btn btn-primary" ng-click="select(item)">{{item.name}}</button>
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;" tooltip="{{item.name + (isDisabled(item.name)?' is not available' : '')}}"></div>
  </div>
</div>

Fiddle: http://jsfiddle.net/695qtssv/3/