get almost everything working

addon/components/attach-popover.js

@@ -85,6 +85,11 @@ export default Component.extend({
  return `ember-attacher-${this.get('animation')} ${this.get('class') || ''} ${showOrHideClass}`;
  }),
 
+ // This is memoized so it can be used by both attach-popover and attach-tooltip
+ _config: computed(function() {
+ return getOwner(this).resolveRegistration('config:environment');
+ }),
+
  _hideOn: computed('hideOn', function() {
  return this.get('hideOn').split(' ');
  }),
@@ -122,7 +127,7 @@ export default Component.extend({
  this._delayedVisibilityToggle = later(this, () => {
  this._animationTimeout = requestAnimationFrame(() => {
  if (!this.isDestroyed && !this.isDestroying) {
- run(() => this.set('isVisible', isVisible));
+ this.popperElement.style.display = isVisible ? '' : 'none';
 
  if (onChange) {
  onChange(isVisible);
@@ -131,7 +136,7 @@ export default Component.extend({
  });
  }, delay);
  } else {
- this.set('isVisible', isVisible);
+ this.popperElement.style.display = isVisible ? '' : 'none';
 
  if (onChange) {
  onChange(isVisible);
@@ -190,7 +195,7 @@ export default Component.extend({
  },
 
  _setUserSuppliedDefaults() {
- const defaults = getOwner(this).resolveRegistration('config:environment').emberAttacher || {};
+ const defaults = this.get('_config').emberAttacher || {};
 
  // Exit early if no custom defaults are found
  if (!defaults) {
@@ -213,10 +218,11 @@ export default Component.extend({
  }
  },
 
- // TODO(kjb) I don't think this is relevant anymore
  didInsertElement() {
  this._super(...arguments);
 
+ this.popperElement.style.display = this.get('isShown') ? '' : 'none';
+
  requestAnimationFrame(() => {
  // The attachment has no width if initially hidden. This can cause it to be positioned so far
  // to the right that it overflows the screen until enough updates fix its position.

addon/components/attach-tooltip.js

@@ -1,27 +1,13 @@
 import AttachPopover from './attach-popover';
-import { computed } from '@ember/object';
+import { computed, observer } from '@ember/object';
 import DEFAULTS from '../defaults';
 
 export default AttachPopover.extend({
- /**
- actions: {
- onFoundTarget(target) {
- const oldTarget = this.get('_target');
- if (oldTarget) {
- oldTarget.removeAttribute('aria-describedby');
- }
-
- this._super(...arguments);
-
- target.setAttribute('aria-describedby', this.id);
- }
- },
-
  ariaRole: 'tooltip',
 
  class: computed({
  get() {
- return this.get('config').tooltipClass || DEFAULTS.tooltipClass;
+ return this.get('_config').tooltipClass || DEFAULTS.tooltipClass;
  },
 
  set(_key, value) {
@@ -31,13 +17,23 @@ export default AttachPopover.extend({
  }
  }),
 
+ targetChanged: observer('target', function() {
+ const oldTarget = this._currentTarget;
+ if (oldTarget) {
+ oldTarget.removeAttribute('aria-describedby');
+ }
+
+ this._super(...arguments);
+
+ this.get('target').setAttribute('aria-describedby', this.id);
+ }),
+
  willDestroyElement() {
  this._super(...arguments);
 
- const target = this.get('_target');
+ const target = this._currentTarget;
  if (target) {
  target.removeAttribute('aria-describedby');
  }
  }
-*/
 });

tests/dummy/app/styles/app.scss

@@ -119,7 +119,7 @@ p {
  transform: translate(0);
 }
 
-.custom-extra-inner-class {
+.custom-popover-css {
  background-color: #fff;
  border: 1px solid #ddd;
  color: #333;

tests/dummy/app/templates/components/attachment-example.hbs

@@ -6,10 +6,8 @@
  <button class="hover-me">
  Tooltip me, captain!
 
-{{!-- TODO(kjb) Fixme --}}
- {{#attach-popover animation=tooltipData.animation
+ {{#attach-tooltip animation=tooltipData.animation
  arrow=tooltipData.arrow
-class="ember-attacher-popper ember-attacher-tooltip"
  hideDelay=tooltipData.hideDelay
  hideDuration=tooltipData.hideDuration
  hideOn=tooltipData.hideOn
@@ -22,33 +20,32 @@ class="ember-attacher-popper ember-attacher-tooltip"
  showDuration=tooltipData.showDuration
  showOn=tooltipData.showOn}}
  Hello world!
- {{/attach-popover}}
+ {{/attach-tooltip}}
  </button>
 
  <button class="hover-me target-plz">
  Click me, captain!
- </button>
 
- {{#attach-popover animation=popoverData.animation
- arrow=popoverData.arrow
- class="ember-attacher-popper custom-popover-css"
- hideDelay=popoverData.hideDelay
- hideDuration=popoverData.hideDuration
- hideOn=popoverData.hideOn
- interactive=popoverData.interactive
- innerClass='custom-extra-inner-class'
- isShown=popoverData.isShown
- lazyRender=popoverData.lazyRender
- onChange=(action (mut popoverData.isShown))
- placement=popoverData.placement
- renderInPlace=popoverData.renderInPlace
- showDelay=popoverData.showDelay
- showDuration=popoverData.showDuration
- showOn=popoverData.showOn as |emberAttacher|}}
- <p>Popovers and tooltips, oh my!</p>
+ {{#attach-popover animation=popoverData.animation
+ arrow=popoverData.arrow
+ class="ember-attacher-popper custom-popover-css"
+ hideDelay=popoverData.hideDelay
+ hideDuration=popoverData.hideDuration
+ hideOn=popoverData.hideOn
+ interactive=popoverData.interactive
+ isShown=popoverData.isShown
+ lazyRender=popoverData.lazyRender
+ onChange=(action (mut popoverData.isShown))
+ placement=popoverData.placement
+ renderInPlace=popoverData.renderInPlace
+ showDelay=popoverData.showDelay
+ showDuration=popoverData.showDuration
+ showOn=popoverData.showOn as |emberAttacher|}}
+ <p>Popovers and tooltips, oh my!</p>
 
- <button {{action emberAttacher.hide}}>Close</button>
- {{/attach-popover}}
+ <button {{action emberAttacher.hide}}>Close</button>
+ {{/attach-popover}}
+ </button>
  </centered>
 </centered>
 {{#if (and service.arrow (eq service.animation "fill"))}}