camskene · June 21, 2019 03:01
diff --git a/controllers.application.js b/controllers.application.js
 import Ember from 'ember';

 export default Ember.Controller.extend({  
  data: ['a', 'b', 'c', 'd', 'e'],
 });
diff --git a/services.tooltip.js b/services.tooltip.js
 import Ember from 'ember';

 export default Ember.Service.extend({
  text: '',
  component: undefined,
  targetOffset: { top: 0, left: 0 },
 });
diff --git a/templates.application.hbs b/templates.application.hbs
 <button>
 	Hello
 	{{x-tooltip text='World'}}
 </button>

 <button>
 	Foo
 	{{x-tooltip text='Bar'}}
 </button>

 <button>
 	Qux
 	{{x-tooltip component=(component 'x-tooltip-custom' componentProps=data)}}
 </button>

 <br>
 <br>
 <br>
 <br>

 {{x-tooltip-target}}
diff --git a/twiddle.json b/twiddle.json
 {
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "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": {}
 }
diff --git a/x-tooltip-custom.component.js b/x-tooltip-custom.component.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 });
diff --git a/x-tooltip-custom.template.hbs b/x-tooltip-custom.template.hbs
 <ul>
  {{#each componentProps as |prop|}}
    <li>{{prop}}</li>
  {{/each}}
 </ul>
diff --git a/x-tooltip-target.component.js b/x-tooltip-target.component.js
 import Ember from 'ember';

 export default Ember.Component.extend({
  tooltip: Ember.inject.service(),
 });
diff --git a/x-tooltip-target.template.hbs b/x-tooltip-target.template.hbs
 {{#x-velcro
  targetOffset=this.tooltip.targetOffset
 }}
  {{#if this.tooltip.text}}
    {{this.tooltip.text}}
  {{/if}}

  {{#if this.tooltip.component}}
    {{this.tooltip.component}}
  {{/if}}
 {{/x-velcro}}
diff --git a/x-tooltip.component.js b/x-tooltip.component.js
 import Ember from 'ember';

 export default Ember.Component.extend({
  tooltip: Ember.inject.service(),
  text: '',
  component: undefined,
  
  positionTooltip() {    
    let { offsetTop: top, offsetLeft: left } = this.element.parentNode;
    Ember.set(this.tooltip, 'targetOffset', { top: top + this.element.parentNode.clientHeight + 10, left });
  },
  
  addTooltipListener() {
    this.element.parentNode.addEventListener('mouseenter', this.addTooltip.bind(this));
    this.element.parentNode.addEventListener('mouseenter', this.addComponent.bind(this));
  },

  removeTooltipListener() {
    this.element.parentNode.addEventListener('mouseleave', this.removeTooltip.bind(this));
    this.element.parentNode.addEventListener('mouseleave', this.removeComponent.bind(this));
  },
  
  addTooltip() {
    this.positionTooltip();
    Ember.set(this.tooltip, 'text', this.text);
  },
  
  addComponent() {
    Ember.set(this.tooltip, 'component', this.component);
  },
  
  removeComponent() {
    Ember.set(this.tooltip, 'component', undefined);
  },
  
  removeTooltip() {
    Ember.set(this.tooltip, 'text', '');
 	},
  
  didInsertElement() {
    this.addTooltipListener();
    this.removeTooltipListener();
  },
  
  willDestroyElement() {
  	this.element.parentNode.removeEventListener('mouseenter', this.addTooltip);
    this.element.parentNode.removeEventListener('mouseleave', this.removeTooltip);
    this.element.parentNode.removeEventListener('mouseenter', this.addComponent);
    this.element.parentNode.removeEventListener('mouseleave', this.removeComponent);
  },
 });
diff --git a/x-velcro.component.js b/x-velcro.component.js
 import Ember from 'ember';

 export default Ember.Component.extend({
  didRender() {
    this._super(...arguments);
    this.element.style.position = 'absolute';
    this.element.style.top = this.targetOffset.top + 'px';
    this.element.style.left = this.targetOffset.left + 'px';
  },
 });
diff --git a/x-velcro.template.hbs b/x-velcro.template.hbs
 {{yield}}
	import Ember from 'ember';

	export default Ember.Controller.extend({
	data: ['a', 'b', 'c', 'd', 'e'],
	});
	import Ember from 'ember';

	export default Ember.Service.extend({
	text: '',
	component: undefined,
	targetOffset: { top: 0, left: 0 },
	});
	<button>
	Hello
	{{x-tooltip text='World'}}
	</button>

	<button>
	Foo
	{{x-tooltip text='Bar'}}
	</button>

	<button>
	Qux
	{{x-tooltip component=(component 'x-tooltip-custom' componentProps=data)}}
	</button>

	<br>
	<br>
	<br>
	<br>

	{{x-tooltip-target}}
	{
	"version": "0.15.1",
	"EmberENV": {
	"FEATURES": {}
	},
	"options": {
	"use_pods": true,
	"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": {}
	}
	import Ember from 'ember';

	export default Ember.Component.extend({
	});
	<ul>
	{{#each componentProps as \|prop\|}}
	<li>{{prop}}</li>
	{{/each}}
	</ul>
	import Ember from 'ember';

	export default Ember.Component.extend({
	tooltip: Ember.inject.service(),
	});
	{{#x-velcro
	targetOffset=this.tooltip.targetOffset
	}}
	{{#if this.tooltip.text}}
	{{this.tooltip.text}}
	{{/if}}

	{{#if this.tooltip.component}}
	{{this.tooltip.component}}
	{{/if}}
	{{/x-velcro}}
	import Ember from 'ember';

	export default Ember.Component.extend({
	didRender() {
	this._super(...arguments);
	this.element.style.position = 'absolute';
	this.element.style.top = this.targetOffset.top + 'px';
	this.element.style.left = this.targetOffset.left + 'px';
	},
	});