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.

score 4 · Answer 1 · edited May 23 '17 at 12:33

4

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/

edited May 23 '17 at 12:33

Community

1
1

answered Mar 25 '15 at 07:52

mikzaaa

43
5

As presented in the current jsFiddle, the tooltip behaviour is as expected, but the button is rendered unclickable (even when enabled) – Chris Oct 19 '15 at 10:44
Putting the covering div in an ng-show on the disabled flag and styling it to show the 'not-allowed' cursor completes the illusion and restores functionality. – Chris Oct 19 '15 at 10:59

boindiil · Answer 2 · 2015-03-25T07:50:48.833

Basically it is not possible to directly set the tooltip of the input element and show it when it is disabled. This is because there are no events fired from the browser on disabled input. This is discribed in this issue.

However you are on the right way. You have to wrap the input element. I have this solution from the issue above.

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

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

.layer-mask {
     position: relative;
}
.layer {
    position: absolute;
    top: 0;
    left:0;
    right:0;
    bottom:0;
}
.layer-mask button[disabled] {
    position: relative;
    z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" />
<br />
<br />
<br />
<div ng-app="myApp" ng-controller="MyCtrl">
    <div class="container">
        <div class="row">
            <div class="layer-mask" tooltip="My Tooltip">
                <div class="layer"></div>
                <button class="input-xxlarge" ng-disabled="isDisabled" ng-model="myModel">
                    My disabled button
                </button>
            </div>
        <br/>
        Disable/Enable <input type="checkbox" ng-model="isDisabled"/>

    </div>
    </div>

This is not a fully sufficient solution. The tooltip works correctly, but the click events do not work on the enabled button. They get blocked by the "layer" div. — Noah Solomon, Aug 26 '15 at 18:21

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

2 Answers2