tooltip stops working after filter action

Question

I am applying bootstrap popover with ember cli . works great but when I use another action to filter the page, the popovers do not work anymore. To bind the popover I'm using the following: views/restaurants/search-results.js

import Ember from 'ember';

export default Ember.View.extend({
    jqueryEvents: function(){
    Ember.$('[data-toggle="popover"]').popover();
  }.observes('controller.filteredRestaurants').on('didInsertElement')
});

my application.js controller has an action that transitionsToRoute search-results.js which updates the filteredRestaurants property and when it does, the popover stops working.

One thing that could be adding complexity is that search-results template loops the restaurants that are filtered and each restaurant has a partial with the button that is bound to the tooltip inside the partial for each restaurant.

Answer 1

export default Ember.View.extend({
    jqueryEvents: function(){
       Ember.$('body').on('mouseover', '*[data-toggle="popover"]', function() {
          $(this).popover();
          $(this).popover('show');
       });
    }.observes('controller.filteredRestaurants').on('didInsertElement')
});