Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS Bootstrap-UI:禁用按钮时启用按钮上的工具提示大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在这里查看我的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/

大佬总结

以上是大佬教程为你收集整理的AngularJS Bootstrap-UI:禁用按钮时启用按钮上的工具提示全部内容,希望文章能够帮你解决AngularJS Bootstrap-UI:禁用按钮时启用按钮上的工具提示所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。