Question

请在此处查看我的jsfiddle代码 http://jsfiddle.net/695qtssv/2/

如何在禁用时显示工具提示按钮？

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;

}

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

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

非常感谢任何帮助。

Answer 1

我认为禁用元素不会触发鼠标事件。见Event on a disabled input

基于以上链接，我提供了这种解决方案：

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

小提琴：http://jsfiddle.net/695qtssv/3/

Answer 2

基本上不可能直接设置输入元素的工具提示并在禁用时显示它。这是因为在禁用的输入上没有从浏览器触发事件。这在issue中有所描述。

然而，你是正确的方式。你必须包装input元素。我从上面的问题得到了这个解决方案。

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>

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

2 个答案: