popover.js

var App = window.App || {};

App.Popovers = function(){
  var getPopoverLeft = function(trigger_pos, $trigger_el, $popover) {
    var left = trigger_pos.left + $trigger_el.outerWidth()/2;
    left += $trigger_el.outerWidth(true) - $trigger_el.outerWidth();
    left -= $popover.outerWidth()/2;
    return left;
  }

  var getPopoverTop = function(trigger_pos, $trigger_el) {
    return trigger_pos.top + $trigger_el.outerHeight(true);
  }

  /*
  * @param $trigger_element elements with .popover-control class
  */
  var positionPopover = function($trigger_element) {
    var trigger_position = $trigger_element.position();
    var $popover = $($trigger_element.data('popover'));
    $popover.css({
      top: getPopoverTop(trigger_position, $trigger_element)+'px',
      left: getPopoverLeft(trigger_position, $trigger_element, $popover)+'px'
    });
  }

  var forceClose = function() {
    $('.popover-visible').removeClass('popover-visible');
    $(document).off('click', forceClose);
  }

  var togglePopover = function(e) {
    var $target = $(e.currentTarget);
    var $popover = $($target.data('popover'));

    $popover.toggleClass('popover-visible');
    
    if($popover.hasClass('popover-visible') !== false) {
      e.stopPropagation();
      positionPopover($target);
      $(document).on('click', forceClose);
    } else {
      $(document).off('click', forceClose);
    }
  }

  /*
  * @params $elements list of .popover-control elements
  */
  var addListeners = function($elements) {
    $.each($elements, function(i, el){
      var $el = $(el);

      switch($el.data('popover-trigger')) {

        case "hover":
          $el.on('mouseover', togglePopover);
          $el.on('mouseout', togglePopover);
          break;

        case "click":
        default:
          $el.on('click', togglePopover);
          break;
      }
    });
  }

  var init = function() {
    addListeners($('.popover-control'));
  }

  return {
    init: init
  }
}();