diff --git a/component.json b/component.json
index 3acf839..222db64 100644
--- a/component.json
+++ b/component.json
@@ -19,7 +19,7 @@
   },
   "development": {
     "component/aurora-tip": "*",
-    "component/jquery": "*"
+    "component/event": "*"
   },
   "scripts": [
     "index.js",
diff --git a/index.js b/index.js
index cb54b3a..1b881ea 100644
--- a/index.js
+++ b/index.js
@@ -307,8 +307,8 @@ Tip.prototype.offset = function(pos){
   var eh = el.clientHeight;
 
   var to = offset(target);
-  var tw = target.clientWidth;
-  var th = target.clientHeight;
+  var tw = target.offsetWidth;
+  var th = target.offsetHeight;
 
   switch (pos) {
     case 'top':
diff --git a/test/index.html b/test/index.html
index 65a3a78..1b00156 100644
--- a/test/index.html
+++ b/test/index.html
@@ -39,8 +39,8 @@
         margin: 80px;
         width: 80%;
       }
-      .tip {
-        background-color: black;
+      #border {
+        border-width: 10px;
       }
     </style>
   </head>
@@ -65,19 +65,24 @@
       <a href="#" id="hover-value">Hover Value</a>
       <a href="#" id="terse-hover-value">Terse Hover Value</a>
       <a href="#" id="big">Big</a>
+      <a href="#" id="border">Thick border</a>
     </div>
     <script>
-      var o = require('jquery');
       var Tip = require('tip');
+      var q = require('query');
+      var events = require('event');
 
-      o('#bottom,#left,#right,#top,#bottom-right,#bottom-left,#top-right,#top-left').each(function(i, el){
-        var tip = new Tip(o(el).text());
-        tip.position(o(el).text().toLowerCase().split('-').join(' '));
-        o(el).hover(function(){
+      '#bottom,#left,#right,#top,#bottom-right,#bottom-left,#top-right,#top-left'.split(',').forEach(function(id){
+        var el = q(id),
+          tip = new Tip(el.textContent);
+        tip.position(el.textContent.toLowerCase().split('-').join(' '));
+
+        events.bind(el, 'mouseenter', function(){
           tip.show(el);
-        }, function(){
+        });
+        events.bind(el, 'mouseleave', function(){
           tip.hide(200);
-        })
+        });
       })
 
       var maru = new Tip('<img src="http://www.lifelounge.com.au/resources/IMGRELATED/maru-magic-show-catbag-youtube-cat-adventure.jpg" width="200" height="100" />');
@@ -85,11 +90,14 @@
 
       var tip = new Tip('<input type="search" placeholder="Search" />');
       tip.position('top');
-      o('#markup').hover(function(){
+
+      var el = q('#markup');
+      events.bind(el, 'mouseenter', function(){
         tip.show('#markup');
-      }, function(){
+      });
+      events.bind(el, 'mouseleave', function(){
         tip.hide(200);
-      })
+      });
 
       var auto = new Tip('Some tip contents');
       auto.position('bottom');
@@ -112,6 +120,15 @@
       var big = new Tip('Just a bigger tip example');
       big.show('#big');
       big.position('top left');
+
+      var border = new Tip('Tip below');
+      border.position('bottom',{
+        auto: false
+      }).show('#border');
+      border = new Tip('Tip on the right');
+      border.position('right', {
+        auto: false
+      }).show('#border');
     </script>
   </body>
 </html>