current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm using AngularJS 1.3.0-beta.2, jQuery 2.1.0, Angular UI 0.11, and my custom version of Angular UI's Tooltip widget, and I want buttons within my tooltip to close the tooltip when clicked.

Plunkr

The key part is at crud_tooltip.js:372:

  scope.closePopup = function() {
    var trigger = element.prev();
    if (scope.mode === 'timeout') {
      $timeout(function() {
        trigger.triggerHandler('click');
      });
    }
    else {
      trigger.triggerHandler('click');
    }
  };

The version using $timeout works, but there's a noticeable delay between clicking the button and seeing the popup close.

The version not using $timeout gives an error: [$rootScope:inprog] $apply already in progress. It then closes the popup anyway... I'm not sure why.

How can I modify closePopup (or the ng-click that calls it) to make the tooltip close immediately when the user clicks the button within the tooltip?

Note: I adapted my custom_tooltip.js code from Angular UI's tooltip code, using this Plunker as a guideline. I've also tried directly changing the tt_isOpen value and defining a new crudtooltip-toggle attribute, both with very limited success.

share|improve this question
add comment

2 Answers 2

up vote 1 down vote accepted
+100

Maybe I'm missing the point, but your code seems incredibly complicated and convoluted for such simply functionality. In any case, the delay is actually due to a $timeout which is waiting for some animation to finish. The timeout is triggered because scope.tt_animation evaluates to truthy. Simply changing the timeout to 0 at line 258 of crud_tooltip.js fixes the issue. See this plunk

Here's the problem area:

            if ( scope.tt_animation ) {
              transitionTimeout = $timeout(removeTooltip, 500);
            } else {
              removeTooltip();
            }
share|improve this answer
    
Thanks, I don't know how I missed that part before! With regards to the code complexity, it's ui-bootstrap-tooltip, changed to support isolate scope, and changed again to make a simple-ish Plunkr example. It's over-complicated for the Plunkr, but not for my code base. –  Aaron Jun 19 at 14:40
add comment
up vote 1 down vote

You're looking at the wrong thing.

That delay is coming from elsewhere and is definitely not bound to the $timeout, but also to the notimeout method (ignoring the error, of course, but that can be easily fixed by checking for $scope.$$phase first).

Also, when you click the original links, both of them, the closing delay is there.

So, in 4 cases you get the same delay, which means it's something in the code. I'll give it another look and update the answer if I find what's causing it.

share|improve this answer
add comment

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.