Angular: Tooltip on disabled input - More complex example

http://angularjs.org/

by manoj

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">
    <br/>
    <br/>
    <br/>
    <div class="container">
        <div class="row">
             <h4>Tooltip on disabled input-element works fine:</h4>

            <div style="display: inline-block;" tooltip="My Tooltip">
                <input class="input-xxlarge" type="text" ng-disabled="isDisabled1" ng-model="myModel1" />
            </div>
            <br/>Disable/Enable
            <input type="checkbox" ng-model="isDisabled1" />
        </div>
        <div class="row">
            <br/>
            <br/>
            <br/>
             <h4>Tooltip on disabled select-element does not work properly</h4>
Only in CHROME, IE works fine. Chrome works fine when element is enabled.
            <br/>
            <br/>
            <div style="display: inline-block;" tooltip="My Tooltip">
                <select ng-disabled="isDisabled2" ng-model="myModel2">
                    <option value="a">a</option>
                    <option value="b">b</option>
                </select>
            </div>
            <br/>Disable/Enable
            <input type="checkbox" ng-model="isDisabled2" />
        </div>
    </div>

JavaScript

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

function MyCtrl($scope) {

    $scope.myModel1;
    $scope.myModel2;
    $scope.isDisabled1 = true;
    $scope.isDisabled2 = true;

}