current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 4 down vote favorite
1

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?

share|improve this question

3 Answers 3

up vote 6 down vote accepted

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>
share|improve this answer
    
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 3 at 14:46
up vote 0 down vote

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/

share|improve this answer
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: embed.plnkr.co/numlaAuLOxh3a03Z7O85/preview. Did I miss something? –  Naftis Apr 10 '14 at 15:22
up vote 1 down vote

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>
share|improve this answer
    
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... –  Naftis May 29 '14 at 9:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.