diff --git a/addon/components/tether-to-selection/component.js b/addon/components/tether-to-selection/component.js
index cd55cc7..1749a72 100644
--- a/addon/components/tether-to-selection/component.js
+++ b/addon/components/tether-to-selection/component.js
@@ -1,26 +1,41 @@
-import jQuery from 'jquery';
 import Ember from 'ember';
 import layout from './template';
 
 let { Component } = Ember;
 
+const LEFT_PADDING = 0;
+const TOP_PADDING = 10;
+
 export default Component.extend({
   layout,
+  classNames: ['mobiledoc-selection-tether'],
+  left: 0,
+  top: 0,
+
+  willInsertElement() {
+    let selection = window.getSelection();
+    let range = selection && selection.rangeCount && selection.getRangeAt(0);
+
+    Ember.assert('Should not render {{#tether-to-selection}} when there is no selection', !!range);
+
+    if (range) {
+      let rect = range.getBoundingClientRect();
+      this.set('left', rect.left);
+      this.set('top', rect.top);
+    }
+  },
+
   didInsertElement() {
     Ember.run.schedule('afterRender', () => {
-      var selection = window.getSelection();
-      var range = selection && selection.rangeCount && selection.getRangeAt(0);
-
-      if (range) {
-        var rect = range.getBoundingClientRect();
-        let wrapperOffset = jQuery('.mobiledoc-editor').offset();
-        let myHeight = this.$().height();
-        this.$().css({
-          position: 'absolute',
-          left: `${rect.left - wrapperOffset.left}px`,
-          top: `${rect.top - wrapperOffset.top - myHeight - 10}px`
-        });
-      }
+      let myHeight = this.$().height();
+      let left = this.get('left') - LEFT_PADDING;
+      let top = this.get('top') - TOP_PADDING - myHeight;
+
+      this.$().css({
+        position: 'fixed',
+        left: `${left}px`,
+        top: `${top}px`
+      });
     });
   }
 });