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

发布时间：2020-12-17 17:38:41 所属栏目：安全来源：网络整理

导读：请在这里查看我的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' : '')}}"

请在这里查看我的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上使用工具提示,但仍然没有运气,如示例中所示.

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

任何帮助将不胜感激.

解决方法

我认为禁用元素不会触发鼠标事件.
见 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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!