Tooltip misplaced inside ng-repeat

Question

The following shows the tooltip text in the right place:

  %a{:href => "http://google.com/"}
    %span{:tooltip => "TEST"}
      = "test"

The following shows the tooltip half a screen below (increasing distance for each element)

%div{:"ng-repeat" => "point in points"}
  %a{:href => "http://google.com/"}
    %span{:tooltip => "TEST"}
      = "test"

It's written in HAML, so in plain HTML the last two lines look like this: <span tooltip="TEST">test</span>.

The points are fetched using Rails $Resource, but I get the same problem when I use the regular $resource.

I'm using the tooltip directive from Angular UI Bootstrap. The application is built in Ruby on Rails 4.0 and uses the angularjs-rails gem (unstable).

My best guess is that the CSS on my site is somehow too complex and that I need to find a way to reprocesses these tooltips after loading.

Answer 1

I needed to add this below my app = angular.module(...) line:

app.config( function ( $tooltipProvider ) {
  $tooltipProvider.options({appendToBody: true});
});

I'm not sure what's going on here, but it has something to do with https://github.com/angular-ui/bootstrap/pull/254 and perhaps also https://github.com/angular-ui/bootstrap/issues/139.