Tooltip bug with angular 1.3

[ozdavid3]

When migrating to angular 1.3 tooltip stops showing.
It seems like the element does show on the DOM but its class attribute does not contain required classes in order to change opacity (so opacity stays 0).

[pkozlowski-opensource]

@ozdavid3 we will need a minimal reproduction scenario to make this one actionable:
https://github.com/angular-ui/bootstrap/blob/master/CONTRIBUTING.md#you-think-youve-found-a-bug

[crazyjaw]

I saw this too. Its actually happens when you include the ngAnimate in angular 1.3: http://plnkr.co/edit/fqqEH3bJcvwTtlnIKyxl

Oddly doesn't effect popovers

[boutils]

This is a minimal reproduction scenario of this bug: http://plnkr.co/edit/bYD4roQL9q1CvsuL6dk4?p=preview

[bitconym]

I also noticed this, and quick fix is to remove the ngAnimate until this is resolved.

[jgrund]

In addition, setting tooltip-animation to false also works around this bug.

[Burgov]

Thanks for the workaround suggestion @jgrund! The project is way beyond disabling ngAnimate so this is a welcome fix.

[bitconym]

@jgrund thanks, better fix than disabling ngAnimate. I disabled tooltiop animation globally via $tooltipProvider

[psi-4ward]

// ui-bootstrap tooltip animation is broken using angular 1.3
app.config(['$tooltipProvider', function($tooltipProvider) {
  $tooltipProvider.options({animation: false});
}]);

is a temporary workaround, thanks to @imjusd

[michael-wirth]

Seems the bug has already been fixed with issue #2825

[jsimpsonjr00]

@t4gedieb that change did work on my project. Though the tooltip takes longer to fade out once the mouse leaves than my previous build with Angular 1.2.6.

[patrickstubner]

The animation fix works just for angular 1.3.0, but not anymore for angular 1.3.1

[yonatang]

@patrickstubner the animation fix isn't required while using angular 1.3.0, and the tooltip doesn't work at all in 1.3.1.
http://plnkr.co/edit/suXHNvaqcuTiCxXrrmoC?p=preview (using angular 1.3.1, broken)
http://plnkr.co/edit/JcL4iCURMBbYZFhcfLTo?p=preview (using angular 1.3.0, works)

[patrickstubner]

@yonatang use ngAnimate in your app and you will need the in angular 1.3.0.
And yes, with angular1.3.1 it's not working at all.

[chrisirhc]

I've looked into the issue for AngularJS 1.3.1. It'll be resolved when I merge #1817.
Details are on #1600 (comment) .

[chrisirhc]

This seemed to already be resolved on master: http://plnkr.co/edit/bQaZ4z5BFwfAZSzRa2Hq?p=preview

[sylouuu]

Nice, hope that the next tag will be up soon, 0.11.3?

[mrzepinski]

+1 for 0.11.3 and fixes for tooltips

[davinkevin]

+1 for 0.11.3

[cebor]

👍

[dhoko]

+1 ☕

[clarkduvall]

+1

[clarkduvall]

One workaround for this before the next release happens is manually setting the tooltip trigger and placment:

<div tooltip="foo bar" tooltip-trigger tooltip-placement="top"></div>

Or you can make a temporary directive hack to add in the attributes:

app.directive('tooltip', function() {
  return {
    restrict: 'EA',
    link: function(scope, element, attrs) {
      attrs.tooltipTrigger = attrs.tooltipTrigger;
      attrs.tooltipPlacement = attrs.tooltipPlacement || 'top';
    }
  }
});

[karthikc]

Setting the tooltip trigger and placement worked! Thank you @clarkduvall

[chrisirhc]

This has been resolved on master. Thanks for reporting!

[krico]

Did it make it to 0.12.0 release?

[Astrophizz]

It appears so. Tooltips animate fine in my testing. If you set animation to false they're a little janky; they appear to the right briefly and then jump to wherever you set the position. I'm not sure if they behaved like that before.

[cnaccio]

There seems to be a problem with placement/position of tooltips, and popovers. It has something to do with the changes to angular.isDefined which works differently in AngularJS 1.2 & 1.3

Here are a few directives to patch the issues by setting defaults

        // Bootstrap UI fixes after upgrading to Angular 1.3
        .directive('tooltip', function() {
            return {
                restrict: 'EA',
                link: function(scope, element, attrs) {
                    attrs.tooltipPlacement = attrs.tooltipPlacement || 'top';
                    attrs.tooltipAnimation = attrs.tooltipAnimation || true;
                    attrs.tooltipPopupDelay = attrs.tooltipPopupDelay || 0;
                    attrs.tooltipTrigger = attrs.tooltipTrigger || 'mouseenter';
                    attrs.tooltipAppendToBody = attrs.tooltipAppendToBody || false;
                }
            }
        })

        .directive('popover', function() {
            return {
                restrict: 'EA',
                link: function(scope, element, attrs) {
                    attrs.popoverPlacement = attrs.popoverPlacement || 'top';
                    attrs.popoverAnimation = attrs.popoverAnimation || true;
                    attrs.popoverPopupDelay = attrs.popoverPopupDelay || 0;
                    attrs.popoverTrigger = attrs.popoverTrigger || 'mouseenter';
                    attrs.popoverAppendToBody = attrs.popoverAppendToBody || false;
                }
            }
        })

[guilbep]

@cnaccio Wow thanks for that. Also; It fixed my issue on 0.11; I switched later on 0.12.1 and it was fixed 👍

[cferejohn]

I'm still seeing the "jumping" problem (tooltip appears too far to the right and then immediately 'jumps') on angular bootstrap 0.13.3/Angular 1.3.10 (also saw it in 1.4.3). Animation is false and I've set tooltip-trigger and tooltip-placement on the elements in question.