Question

我正在使用AngularJS + Twitter Bootstrap和Bootstrap-UI创建一个Web应用程序。当我在按钮上放置工具提示时，它会按预期显示;但是如果按钮在单击后被禁用（由底层控制器），并且正在显示工具提示，则工具提示不会被隐藏并永远保留在那里。这是一个复制品：

Plunker：http://embed.plnkr.co/numlaAuLOxh3a03Z7O85/preview

只需将鼠标悬停在按钮上即可显示工具提示，然后单击它。该按钮被禁用，工具提示停留在那里。如何避免这种行为并正确隐藏我的提示？

Answer 1

我发现使用简单的替换按钮和锚标签对我来说非常适合。

<a role="button" type="button" class="btn btn-danger" 
    ng-click="someAction()" tooltip="Tooltip" ng-disabled="isDisabled">
      <span class="glyphicon glyphicon-minus"></span>
</a>

Answer 2

通过GitHub搜索问题，我发现suggestion（似乎与您打开的issue相关？）使用包含元素周围工具提示的包装元素：http://jsfiddle.net/RWZmu/ < / p>

<div style="display: inline-block;" tooltip="My Tooltip">
  <button class="navbar-btn btn-danger" ng-click="test()" ng-disabled="isDisabled" tooltip="Here's the tip">
    <i class="glyphicon glyphicon-forward"></i>
  </button>
</div>

Answer 3

在此处使用以下逻辑

<强> HTML

 <div ng-app="someApp" ng-controller="MainCtrl" 
 class="likes" tooltip="show favorites" tooltip-trigger="mouseenter"
 ng-click="doSomething()">{{likes}}</div>

<强> JS

var app = angular.module('someApp', ['ui.bootstrap']);

app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'hideonclick': 'click'
});
}]);

app.controller('MainCtrl', function ($scope) {
$scope.likes = 999;
$scope.doSomething = function(){
    //hide the tooltip
    $scope.tt_isOpen = false;
};

}）

周守军

Hide angular-ui tooltip on custom event

http://jsfiddle.net/3ywMd/10/

AngularJS + Bootstrap-UI：禁用按钮时不隐藏工具提示

3 个答案: