Marionette 1.8 + Bootstrap 3 PopoverRegion

popover_region.coffee

define ['app', 'backbone', 'marionette'], (Backbone) ->
  App.module "Regions", (Regions, App, Backbone, Marionette, $, _) ->

    class Regions.PopoverRegion extends Backbone.Marionette.Region
      # options are:
      # - target: element to bind popover display to
      # - params: parameters passed to Bootstrap's $(el).popover() method
      constructor: (options = {}) ->
        unless options.target?
          throw new Error('You need to specify a target for the popover region')
        @$target = $(options.target)

        if options.params?
          @params = options.params

        unless @$target.length
          throw new Error("Target element by selector `#{options.target}` does not exist")
        unless @$target.length == 1
          throw new Error("Selector `#{options.target}` is ambiguous")

        @on 'show', @showPopover
        @on 'close', @hidePopover

      open: (view) ->
        params = _.extend @params,
          html: true
          content: -> view.$el.html()
        @$target.popover(params).popover('show')

      getEl: (selector) ->
        @$target.on 'hide.bs.popover', @close
        # We don't need element returned here, as we've overridden the `open` method
        undefined

      showPopover: (view) ->
        view.on 'close', @hidePopover
        @$target.popover 'show'

      hidePopover: ->
        @$target.popover 'hide'