Ember.js Pop-over

example.hbs

<div class="MyExample">
  {{#pop-over contentComponentClass='someComponent'}}
    {{x-icon name='someIcon' size=24}} Open Pop-over
  {{/pop-over}}
</div>

pop-over.hbs

<a href="#" class="PopOver-trigger" {{action 'toggleContentVisibility' bubbles=false}}>{{yield}}</a>

<div {{bind-attr class=":PopOver-content contentVisible:is-visible"}}>
  {{component contentComponentClass}}
</div>

pop-over.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['PopOver'],
  contentVisible: false,

  didInsertElement: function didInsertElement() {
    this.set('hidePopoverFn', e => {
      if (!this.$('.PopOver-content').get(0).contains(e.target)) {
        this.set('contentVisible', false);
      }
    });

    Ember.$(document).on('click', this.get('hidePopoverFn'));
  },

  willDestroyElement: function willDestroyElement() {
    Ember.$(document).off('click', this.get('hidePopoverFn'));
  },

  actions: {
    toggleContentVisibility: function toggleContentVisibility() {
      this.toggleProperty('contentVisible');
    }
  }
});