Bootstrap Popovers with ember.js template

Question

I\'m trying to use Bootstrap Popover with EmberJS, so that the content of the popover will be a ember/handlebars template (with binding etc). How can this be done? (Ember 1.0.0-

Answer 1

I took Terry's answer a bit further and think I've come up with a simple, general solution to this problem.

I created a bootstrap-popover component like so:

App.BootstrapPopoverComponent = Ember.Component.extend({
  tagName: 'div',      //whatever default you want... div is default anyway here
  classNames: '',      //whatever default you want
  placement: 'bottom', //whatever default you want
  didInsertElement: function () {
    var component = this,
        contents = this.$('.popoverJs');
    component.$().popover({
      animation: false,
      placement: component.get('placement'),
      html: true,
      content: contents
    }).on('show.bs.popover', function () {
      contents.removeClass('hide');
    });
  },
  willDestroyElement: function () {
    this.$().popover('destroy');
  }
});

Here is the associated template:

Note the use of the "hide" class to hide the yielded contents initially. This class is simply "display: none". Without this, things won't work quite how you'd hope.

Once you have that, you can do simply do something like this whenever you want a popover:

  {{#bootstrap-popover title="My Fancy Popover" tagName="button"}}
    

      
my
      
awesome
      
popover
      
contents
      
example
    
  {{/bootstrap-popover}}

The contents should be able to be whatever you want -- any arbitrary HTML, rendering a component or partial, etc.. Naturally, you can specify other tagNames, classNames, title, placement, etc. as you see fit.

I hope this solution helps.