AngularJS + Bootstrap-UI：禁用按钮时启用按钮上的工具提示

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

请在这里查看我的jsfiddle代码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.

我已经尝试在包含按钮的div上使用工具提示,但仍然没有运气,如示例中所示。

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

此工具提示可以使用,但我不能在我正在使用的应用程序中使用它。

Any help would be greatly appreciated.

任何帮助将不胜感激。

2 个解决方案

#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/

#2

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>

#1