Ember.js and Twitter Bootstrap Popover

Question

I'm trying to deploy the popover using ember.js but not sure how to do it.

The contents of the popover must be an element of ember to interact with it.

I've been watching https://github.com/jzajpt/ember-bootstrap but does not include the popover element.

Any ideas? Thanks!

Answer 1

I think, what you try to do will never work, because if your mouse leaves the control, the popover will go away!

App.Popover = Ember.View.extend({
     name: 'myPopover',
     template: Ember.Handlebars.compile('<div class="popover" {{bindAttr name="name"}}><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title">test</h3><div class="popover-content"><p></p></div></div></div>')         
});

App.TextField = Ember.TextField.extend({
    didInsertElement: function() {
        this._super();
        var self = this;                
        Ember.run.schedule('actions', this, function() {
           self.$().popover({
                title: 'title', 
                content: 'content',
                template: $('div[name="myPopover"]')
            });     
        });
    }
});

Answer 2

in the didInsertElement method of your view you can do something like this

didInsertElement: function() {
    var self = this;
    this.$().popover({
        title: self.get('tooltipTitle'), 
        content: self.get('tooltipContent')
    });     
}