Angular: Tooltip on disabled input

http://angularjs.org/

by Sajeetharan Sinnathurai

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<div ng-controller="MyCtrl">
    <h1>Use Pointer Events</h1>
    
    <div style="display: inline-block;" 
         tooltip="My Tooltip">
        <button class="input-xxlarge" 
                ng-disabled="isDisabled" 
                ng-model="myModel">
            My disabled button
        </button>
    </div>
    <div>
        Disable/Enable 
        <input type="checkbox" ng-model="isDisabled"/>
    </div>
</div>

CSS

[disabled] {
  pointer-events: none;
}

JavaScript

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

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