Async content rerendering and in demo app

addon/components/tooltip-on-element.js

@@ -43,6 +43,18 @@ export default EmberTetherComponent.extend({
   tooltipIsVisible: false,
   keepInWindow: true,
 
+  /*
+  When this property changes it repositions the tooltip.
+
+  This isn't actually used in the code anywhere - it just
+  needs to be passed as an attribute so didUpdate is
+  triggered.
+
+  @property updateFor
+  */
+
+  updateFor: null,
+
   /* Actions */
 
   onTooltipDestroy: null,
@@ -322,6 +334,21 @@ export default EmberTetherComponent.extend({
     this.set('offset', offset);
   },
 
+  /*
+  Repositions the tooltip if new attributes or content are
+  passed to the tooltip.
+
+  @method didUpdate
+  */
+
+  didUpdate() {
+    this._super(...arguments);
+
+    run.later(() => {
+      this.positionTether();
+    }, 1000);
+  },
+
   /*
   We use an observer so the user can set tooltipIsVisible
   as a attribute.

tests/dummy/app/controllers/index.js

@@ -3,14 +3,26 @@ import Ember from 'ember';
 const { run } = Ember;
 
 export default Ember.Controller.extend({
+  asyncContent: null,
   showTooltips: false,
 
+  actions: {
+    setAsyncContent() {
+      return new Ember.RSVP.Promise((resolve) => {
+        run.later(() => {
+          this.set('asyncContent', 'Some model');
+          resolve();
+        }, 2000);
+      });
+    },
+  },
+
   init() {
     run.scheduleOnce('afterRender', () => {
       run.later(() => {
-        this.set('showTooltips', true);
+        this.set('showLogoTooltip', true);
       }, 1000);
     });
-  }
+  },
 
 });

tests/dummy/app/styles/app.scss

@@ -99,3 +99,49 @@ hr {
 input {
   @include rem(padding, 0.4, 0.6);
 }
+
+/* Async spinner */
+
+.spinner {
+  margin: 5px 0;
+  width: 70px;
+  text-align: center;
+}
+
+.spinner > div {
+  width: 6px;
+  height: 6px;
+  background-color: #fff;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}
+
+/* End of async spinner */

tests/dummy/app/templates/index.hbs

@@ -22,7 +22,7 @@
   class='logo-tooltip'
   event='none'
   target='#ember-logo'
-  tooltipIsVisible=showTooltips
+  tooltipIsVisible=showLogoTooltip
   side='right'
   spacing=15
 }}
@@ -109,7 +109,7 @@
 
 {{!-- BEGIN-SNIPPET using-with-duration --}}
 {{#some-component}}
-  Tooltip wil disappear after 1000ms
+  Tooltip will disappear after 1000ms
 
   {{#tooltip-on-component duration=1000}}
     Here is the info!
@@ -144,3 +144,29 @@
   {{code-snippet name='custom-styling.hbs'}}
 
 </div>
+
+<div class="page-content">
+  <h3>Using async content</h3>
+
+{{!-- BEGIN-SNIPPET async-content --}}
+{{#some-component}}
+  Tooltip has async content
+
+  {{#tooltip-on-component onTooltipShow='setAsyncContent' updateFor=asyncContent}}
+    {{#if asyncContent}}
+      {{asyncContent}}
+    {{else}}
+      {{!-- Some custom spinner --}}
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
+    {{/if}}
+  {{/tooltip-on-component}}
+{{/some-component}}
+{{!-- END-SNIPPET --}}
+
+  {{code-snippet name='async-content.hbs'}}
+
+</div>