8

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?

Improve this question

3 Answers 3

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks, that seems to do the trick, even if I did not yet check with the latest Angular+Bootstrap versions.
You saved My day :) thanks for your time and efforts
disabled="", generated by ng-disabled="" is not supported by <a> tags
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>
Improve this answer

1 Comment

Thank you! I posted this to GitHub: 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...
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/

Improve this answer

1 Comment

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: embed.plnkr.co/numlaAuLOxh3a03Z7O85/preview. Did I miss something?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.