Popover Custom Region w/ Bootstrap

app.js

/**
   * Triggers a bootstrap popover with signin/register view
   */
  vent.on('app:signin:popover', function ($parentEl, msg, fn) {
    $parentEl.append('<div class="popover-region"></div>');
    app.addRegions({
      popover: {
        selector: '.popover-region',
        parentEl: $parentEl,
        regionType: Marionette.Region.Popover
      }
    });
    app.popover.show( new LoginPopoverView({ actionMsg: msg }) );
    q(account.ready).then(fn).done();
  });

popover.js

define(function (require) {
  var vent = require('vent'),
      $ = require('jquery'),
      Marionette = require('marionette'),
      _ = require('underscore');

  require('bootstrap.popover');

  Marionette.Region.Popover = Marionette.Region.extend({

    initialize: function() {
      _.bindAll(this,'cleanupView');
    },

    open: function() {
      // We don't want the region to attach the view's el,
      // since our popover will handle it
      return false;
    },

    onShow: function(view){
      if (!this.ensureView()) return;
      var options = this.getDefaultOptions(_.result(view, 'popover'));

      this.listenTo(this.currentView, 'popover:close', this.closePopover);
      this.listenTo(this.currentView, 'popover:refresh', this.refreshPopover);
      this.$el.on('hidden.bs.popover', this.cleanupView);
      this.$el.popover(options);
      this.$el.popover('show');
    },

    getDefaultOptions: function(options) {
      options = _.clone(options) || {};
      _.defaults(options, {
        placement: 'bottom auto',
        html: true,
        className: '',
        content: this.currentView.el
      });
      _.extend(options, {
        template: options.template || '<div class="popover ' + options.className + '"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
      });
      return options;
    },

    closePopover: function(){
      // Trigger the bootstrap close event and close the view listeners
      this.$el.popover('hide');
    },

    refreshPopover: function() {
      this.$el.popover('setPosition');
    },

    // After the css transition, close the view and remove the listener
    // Small debouce delay since the 'hidden' event is not playing nice
    cleanupView: _.debounce(function() {
      if (!this.ensureView()) return;
      this.$el.off('hidden.bs.popover');
      this.$el.popover('destroy');
      this.close();
      this.stopListening();
      // To provide a hook for other components
      vent.trigger('app:popover:closed');
    }, 200),

    ensureView: function() {
      return (this.currentView) ? true : false;
    }
  });
  return Marionette;
});