AngularJS + Bootstrap-UI: tooltip not hidden when button is disabled

Question

I'm creating a web app using AngularJS + Twitter Bootstrap and Bootstrap-UI. When I place a tooltip on a button, it shows as expected; but if the button gets disabled (by the underlying controller) after being clicked, and the tooltip was being shown, the tooltip is not hidden and stays there forever. Here's a repro:

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

Just hover the button to make the tooltip appear, and then click it. The button is disabled, and the tooltip stays there. How can I avoid this behavior and have my tips correctly hidden?

score 6 · Accepted Answer · answered Nov 24 '14 at 10:42

6

I found that using simply replacing buttons with anchor tags worked perfectly for me.

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

answered Nov 24 '14 at 10:42

devman81

767
8
17

Thanks, that seems to do the trick, even if I did not yet check with the latest Angular+Bootstrap versions. – Naftis Nov 24 '14 at 11:28
You saved My day :) thanks for your time and efforts – Ahmed Mahmoud Jun 03 '15 at 14:46
1

`disabled=""`, generated by `ng-disabled=""` is not supported by `` tags – Blowsie Oct 12 '17 at 13:50

score 2 · Answer 2 · answered May 29 '14 at 08:22

2

Searching through GitHub issues I found the suggestion (seems to be related to the issue opened by you?) to use wrapping element that has a tooltip around the element: http://jsfiddle.net/RWZmu/

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

answered May 29 '14 at 08:22

Michael Vashchinsky

2,137
1
17
15

Thank you! I posted this to GitHub: https://github.com/angular-ui/bootstrap/issues/2059 Yet there seems to be no solution at this time, other than wrapping the potentially disabled element and moving the tooltip outside. This anyway results in a suboptimal grow of HTML markup just for the purpose of correctly handle the tip... – Naftis May 29 '14 at 09:53

score 0 · Answer 3 · edited May 23 '17 at 12:32

0

Use the following logic here

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

})

Souce

Hide angular-ui tooltip on custom event

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

edited May 23 '17 at 12:32

Community

1
1

answered Apr 10 '14 at 13:29

chrishollinworth

170
1
8

1

Thank you, I tried to add the app.config code plus the tt_isOpen instruction (even if it sounds a bit tricky, and forces my controller to take care of visualization issues); yet it does not seem to work. Updated plunkr: http://embed.plnkr.co/numlaAuLOxh3a03Z7O85/preview. Did I miss something? – Naftis Apr 10 '14 at 15:22

AngularJS + Bootstrap-UI: tooltip not hidden when button is disabled

3 Answers3