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.

Community · Accepted Answer · 2017-05-23 12:33:06Z

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, 2017 at 12:33

CommunityBot

11 silver badge

answered Mar 25, 2015 at 7:52

mikzaaa

435 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

As presented in the current jsFiddle, the tooltip behaviour is as expected, but the button is rendered unclickable (even when enabled)

Chris Over a year ago

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.

boindiil · Accepted Answer · 2015-03-25 07:50:48Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related