sr87 sr87 - 2 months ago 17
jQuery Question

Bootstrap popover stops after a few hovers in table

I have a table with a dynamic number of rows. I would like to have a popover appear on hover over a certain element of each row. However, when I load the page, the popover works for the first few (3-6?) times, and then the popover disappears altogether.

<div class="container">
<table class="table" style="width:20%">
<tr ng-repeat="game in games.mlb">
<td>
{{ game.awayTeam }} <br> {{ game.homeTeam }}
</td>
<td>
{{ game.awayScore }} <br> {{ game.homeScore }}
</td>
<td>
<span data-toggle="popover"
data-trigger="hover"
data-content="Some content"
style="float: right"> {{ game.status}} </span>
</td>
</tr>
</table>
</div>


This is the code for the table. As you can see, I'm trying to apply the popover on hover to a dynamic piece of text in the third column of each row of my table. When I load the page, this works for a while. Until it just... doesn't.

Here is the jquery:

<script>
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
});
</script>

Answer Source

ng-repeat doesn't work well with $(document).ready, since there's no guarantee that the $(document).ready call will be before the entire ng-repeat is loaded.

This actually turns the question into more of an Angular question (which can be determined from your use of ng-repeat) from a Bootstrap question. Since there's no callback at the end of a ng-repeat loop, you could use directives instead.

This would be the HTML for your table row:

<tr ng-repeat="game in games.mlb" my-repeat-directive>
  <!-- things go here -->
</tr>

And this would be your associated Javascript:

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    // set your popovers per row element
  };
})