ui-positional-overlay

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  isShow: false,
  isShowInput: false,
  actions: {
   doAction() {
     console.log('DO ACTION', this.get('isShow'));
     return true;
   },
   toggleBtn() {
     this.toggleProperty('isShow');
   },
   toggleInputCard() {
     this.toggleProperty('isShowInput');
   }
  }
});

fly-card.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['fly-card'],
  classNameBindings: ['isShow::fly-card__hidden'],
  attributeBindings: ['tabindex', 'autofocus'],
  
  position: Em.computed({
    get() {
      return {
        N: () => {},
        S: () => {},
        W: () => {},
        E: () => {},
      };
    }
  }),
  // 16 positions
  /**
  * @description Define behaviour type
  * "focus" is default behaviour
  */
  //behaviour: null, // toggle, //toggle-focusout, focus
  //animation: null,
  
  tabindex: -1,
  autofocus: true,
  isShow: false,
  
  name: null,
  
  timeout: 100,
  
  'on-change': function(value) {},
  
  showCard() {
    this.set('isShow', true);
    this.get('on-change')(true);
  },
  hideCard() {
    this.set('isShow', false);
    this.get('on-change')(false);
  },
  didInsertElement() {
    var cardName = this.get('name');
    var selector;
    
    if (cardName) {
      selector = document.querySelector(`[data-card=${cardName}]`);
    }
    
    
    if (cardName) {
      var process = () => {
        selector.addEventListener('focus', _ => {
          this.showCard();
          
          this.setPosition(selector);

          if (this.get('hideOn') && this.get('hideOn') === 'focusOutCard') {
            Ember.run.later(_ => {
              this.$().focus();
              
              this.$().one('blur', _ => {
                if (this.get('isShow')) {
                  Ember.run.later(_ => {
                    this.hideCard();
                    this._blurOnNode(selector);
                  }, this.get('timeout'));
                }
              });

              Ember.run.debounce(this, '_blurOnNode', selector, this.get('timeout'));
            }, this.get('timeout'));
          }
        });
        if (!this.get('hideOn')) {
          selector.addEventListener('blur', _ => {
            if (this.get('isShow')) {
              Ember.run.later(_ => {
                this.hideCard();
              }, this.get('timeout'));
            }
          });
        }
      };
      if (selector) {
        process();
      }
    }
  },
  _blurOnNode(selector) {
    selector.blur();
    console.log('_blurOnNode');
  },
  setPosition(selector) {
    var rect = selector.getBoundingClientRect();
    var element = this.$().get(0);
    
    element.style.position = 'absolute';
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

        element.style.top = (rect.top + rect.height + scrollTop) + 'px';
        element.style.left = (rect.left + scrollLeft) + 'px';
  }
});

fly-card.template.hbs

{{#if isShow}}
  {{yield}}
{{/if}}

templates.application.hbs

<style>
 [tabindex] {
   /*outline: none;*/
 }

 .fly-card {
   border: 1px solid red;
 }
 .fly-card__hidden {
   display: none;
 }
 .block-wrapper {
   border: 1px solid black;
 }
</style>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div style="position: absolute; top: 0; right: 0; border: 1px solid black;">
  <p>Отображение/скрытие при фокусировке/снятии фокуса (абсолютное позиционирование)</p>
  <div style="background: rgba(0,0,0,.3); width: 400px; height: 50px; margin: 10px; padding: 5px;" data-card="block" tabindex="-1">
  </div>
</div>

<p>Отображение/скрытие при фокусировке/снятии фокуса</p>
<input type="text" data-card="input" tabindex="-1" />
<hr/>

<p>Отображение/скрытие при фокусировке/снятии фокуса c карточки</p>
  <button data-card="button" onclick={{action 'doAction'}} tabindex="-1">
    button
  </button>
<hr/>

<div class="block-wrapper">
  <p>Отображение/скрытие при фокусировке/снятии фокуса (абсолютное позиционирование)</p>
  <div style="background: rgba(0,0,0,.3); width: 400px; height: 50px; margin: 10px; padding: 5px;" data-card="block2" tabindex="-1">
  </div>
</div>
<hr/>

{{#fly-card name="input"}}
  input
{{/fly-card}}
{{#fly-card name="button" hideOn="focusOutCard"}}
  button
{{/fly-card}}
{{#fly-card name="block" hideOn="focusOutCard"}}
  block
{{/fly-card}}
{{#fly-card name="block2" hideOn="focusOutCard"}}
  block2
{{/fly-card}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}