diff --git a/README.md b/README.md
index 770bba85..c5d764a1 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,10 @@ Each child component will receive the following props:
 
 ```JavaScript
 {
+    elementDimensions: {
+        width: Number,
+        height: Number
+    },
     isActive: Boolean,
     isPositionOutside: Boolean,
     position: {
@@ -74,7 +78,7 @@ All props are optional.
 Function receives one parameter with the signature `{ isActive: Boolean }`.
 
 **onPositionChanged** : Function - Called when cursor or touch position changes.
-Function receives one parameter with the signature `{ isPositionOutside: Boolean, position: { x: Number, y: Number } }`.
+Function receives one parameter with the signature `{ elementDimensions: { width: Number, height: Number }, isPositionOutside: Boolean, position: { x: Number, y: Number } }`.
 
 **mapChildProps** : Function - Model child component props to your custom shape.
 Function receives one parameter with the signature
diff --git a/example/public/circle.yml b/example/public/circle.yml
deleted file mode 100644
index f69f15eb..00000000
--- a/example/public/circle.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-general:
-  branches:
-    ignore:
-      - gh-pages # list of branches to ignore
diff --git a/example/public/map-child-props.html b/example/public/map-child-props.html
index f561c421..058f0e5f 100644
--- a/example/public/map-child-props.html
+++ b/example/public/map-child-props.html
@@ -20,8 +20,10 @@
 export default () => (
     <ReactCursorPosition
         className="example__target"
-        mapChildProps={({ isPositionOutside, position }) => {
+        mapChildProps={({ elementDimensions, isActive, isPositionOutside, position }) => {
             return {
+                elementDimensions,
+                isActive,
                 isOutside: isPositionOutside,
                 point: position
             };
diff --git a/example/public/should-decorate-children.html b/example/public/should-decorate-children.html
index 82329cdf..b34e56d6 100644
--- a/example/public/should-decorate-children.html
+++ b/example/public/should-decorate-children.html
@@ -15,7 +15,6 @@
 import ReactCursorPosition from 'react-cursor-position';
 
 import PositionLabel from './PositionLabel';
-import PositionChangedLabel from './PositionChangedLabel';
 import InstructionsLabel from './InstructionsLabel';
 
 export default class extends React.Component {
@@ -41,7 +40,10 @@
                     <PositionLabel />
                     <InstructionsLabel />
                 </ReactCursorPosition>
-                <PositionChangedLabel {...this.state} />
+                <PositionLabel {...this.state} {...{
+                    className: 'example__external-label',
+                    shouldShowIsActive: false }
+                }/>
             </div>
         );
     }
diff --git a/example/src/components/ActivationChanged.js b/example/src/components/ActivationChanged.js
index 1b94b88b..7ca6d0b1 100644
--- a/example/src/components/ActivationChanged.js
+++ b/example/src/components/ActivationChanged.js
@@ -20,7 +20,7 @@ export default class extends React.Component {
                         this.setState({ isActive });
                     }
                 }}>
-                    <InstructionsLabel />
+                    <InstructionsLabel className="example__instructions--center"/>
                 </ReactCursorPosition>
                 <ActivationChangedLabel {...this.state} />
             </div>
diff --git a/example/src/components/BasicExample.js b/example/src/components/BasicExample.js
index 832442f7..46524e67 100644
--- a/example/src/components/BasicExample.js
+++ b/example/src/components/BasicExample.js
@@ -12,7 +12,7 @@ export default class extends React.Component {
                     className: 'example__target example__target--basic'
                 }}>
                     <PositionLabel />
-                    <InstructionsLabel />
+                    <InstructionsLabel className="example__instructions--low" />
                 </ReactCursorPosition>
             </div>
         );
diff --git a/example/src/components/InstructionsLabel.js b/example/src/components/InstructionsLabel.js
index 1b90f343..0a5f9d02 100644
--- a/example/src/components/InstructionsLabel.js
+++ b/example/src/components/InstructionsLabel.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-export default () => (
-    <div className="example__instructions">
+export default ({ className }) => (
+    <div className={`${className ? className: ''} example__instructions`}>
          Long Touch and Drag Or Hover Here
     </div>
 );
diff --git a/example/src/components/MapProps.js b/example/src/components/MapProps.js
index 77cc7669..cd7c6673 100644
--- a/example/src/components/MapProps.js
+++ b/example/src/components/MapProps.js
@@ -6,8 +6,10 @@ import InstructionsLabel from './InstructionsLabel';
 export default () => (
     <ReactCursorPosition
         className="example__target"
-        mapChildProps={({ isPositionOutside, position }) => {
+        mapChildProps={({ elementDimensions, isActive, isPositionOutside, position }) => {
             return {
+                elementDimensions,
+                isActive,
                 isOutside: isPositionOutside,
                 point: position
             };
diff --git a/example/src/components/PointPositionLabel.js b/example/src/components/PointPositionLabel.js
index aa3ec705..e7dda2aa 100644
--- a/example/src/components/PointPositionLabel.js
+++ b/example/src/components/PointPositionLabel.js
@@ -2,6 +2,11 @@ import React from 'react';
 
 export default (props) => {
     const {
+        elementDimensions: {
+            width = 0,
+            height = 0
+        } = {},
+        isActive = false,
         isOutside = true,
         point: {
             x = 0,
@@ -13,6 +18,9 @@ export default (props) => {
         <div>
             {`x: ${x}`}<br />
             {`y: ${y}`}<br />
+            {`isActive: ${isActive}`}<br />
+            {`Element Width: ${width}`}<br />
+            {`Element Height: ${height}`}<br />
             {`isOutside: ${isOutside ? 'true' : 'false'}`}<br />
         </div>
     );
diff --git a/example/src/components/PositionChanged.js b/example/src/components/PositionChanged.js
index 9590b5cc..b9b52e42 100644
--- a/example/src/components/PositionChanged.js
+++ b/example/src/components/PositionChanged.js
@@ -1,12 +1,16 @@
 import React from 'react';
 import ReactCursorPosition from '../../../dist/ReactCursorPosition';
-import PositionChangedLabel from './PositionChangedLabel';
 import InstructionsLabel from './InstructionsLabel';
+import PositionLabel from './PositionLabel';
 
 export default class extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            elementDimensions: {
+                width: 0,
+                height: 0
+            },
             isPositionOutside: true,
             position: {
                 x: 0,
@@ -22,9 +26,15 @@ export default class extends React.Component {
                     className: 'example__target',
                     onPositionChanged: props => this.setState(props)
                 }}>
-                    <InstructionsLabel />
+                    <InstructionsLabel className="example__instructions--center" />
                 </ReactCursorPosition>
-                <PositionChangedLabel {...this.state} />
+                <PositionLabel
+                    {...this.state}
+                    {...{
+                        className: 'example__external-label',
+                        shouldShowIsActive: false
+                    }}
+                />
             </div>
         );
     }
diff --git a/example/src/components/PositionChangedLabel.js b/example/src/components/PositionChangedLabel.js
deleted file mode 100644
index 0fb21cad..00000000
--- a/example/src/components/PositionChangedLabel.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-export default (props) => {
-    const {
-        isPositionOutside = true,
-        position: {
-            x = 0,
-            y = 0,
-        } = {}
-    } = props;
-    return (
-        <div className="example__external-label">
-            {`x: ${x}`}<br />
-            {`y: ${y}`}<br />
-            {`isPositionOutside: ${isPositionOutside ? 'true' : 'false'}`}
-        </div>
-    );
-}
diff --git a/example/src/components/PositionLabel.js b/example/src/components/PositionLabel.js
index e5834014..d975e69f 100644
--- a/example/src/components/PositionLabel.js
+++ b/example/src/components/PositionLabel.js
@@ -1,7 +1,11 @@
 import React from 'react';
 
-export default (props) => {
+const PositionLabel = (props) => {
     const {
+        elementDimensions: {
+            width = 0,
+            height = 0
+        } = {},
         position: {
             x = 0,
             y = 0
@@ -11,11 +15,19 @@ export default (props) => {
     } = props;
 
     return (
-        <div>
+        <div className={props.className}>
             {`x: ${x}`}<br />
             {`y: ${y}`}<br />
-            {`isActive: ${isActive}`}<br />
+            {props.shouldShowIsActive && [`isActive: ${isActive}`, <br key="line-break"/>]}
+            {`Element Width: ${width}`}<br />
+            {`Element Height: ${height}`}<br />
             {`isOutside: ${isPositionOutside ? 'true' : 'false'}`}
         </div>
     );
-}
+};
+
+PositionLabel.defaultProps = {
+    shouldShowIsActive: true
+};
+
+export default PositionLabel;
diff --git a/example/src/components/ShouldDecorateChildren.js b/example/src/components/ShouldDecorateChildren.js
index f401d436..73cb473f 100644
--- a/example/src/components/ShouldDecorateChildren.js
+++ b/example/src/components/ShouldDecorateChildren.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactCursorPosition from '../../../dist/ReactCursorPosition';
 import PositionLabel from './PositionLabel';
-import PositionChangedLabel from './PositionChangedLabel';
 import InstructionsLabel from './InstructionsLabel';
 
 
@@ -9,6 +8,10 @@ export default class extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            elementDimensions: {
+                width: 0,
+                height: 0
+            },
             isPositionOutside: true,
             position: {
                 x: 0,
@@ -28,7 +31,13 @@ export default class extends React.Component {
                     <PositionLabel />
                     <InstructionsLabel />
                 </ReactCursorPosition>
-                <PositionChangedLabel {...this.state} />
+                <PositionLabel
+                    {...this.state}
+                    {...{
+                        className: 'example__external-label',
+                        shouldShowIsActive: false
+                    }}
+                />
             </div>
         );
     }
diff --git a/example/src/pages/MapProps.js b/example/src/pages/MapProps.js
index b45173b8..5e78721f 100644
--- a/example/src/pages/MapProps.js
+++ b/example/src/pages/MapProps.js
@@ -55,7 +55,7 @@ class  MapChildPropsPage extends Component {
                             sm={6}
                             md={8}
                             className="example__source-container"
-                            style={{ height: '340px' }}
+                            style={{ height: '360px' }}
                         >
                             <iframe
                                 src="map-child-props.html"
diff --git a/example/styles/app.css b/example/styles/app.css
index 5dae740b..e7fc67e9 100644
--- a/example/styles/app.css
+++ b/example/styles/app.css
@@ -57,11 +57,19 @@ li.active a {
     height: 20px;
     width: 100%;
     position: absolute;
-    top: 60%;
+    top: 70%;
     left: 0;
     color: #337ab7;
 }
 
+.example__instructions--center {
+    top: calc(50% - 10px);
+}
+
+.example__instructions--low {
+    top: 70% !important;
+}
+
 .example__source-container {
     margin: 20px 0;
 }
diff --git a/src/ReactCursorPosition.js b/src/ReactCursorPosition.js
index cb204bd4..9b725712 100644
--- a/src/ReactCursorPosition.js
+++ b/src/ReactCursorPosition.js
@@ -11,6 +11,10 @@ export default class extends React.Component {
         super(props);
 
         this.state = {
+            elementDimensions: {
+                width: 0,
+                height: 0
+            },
             isActive: false,
             isPositionOutside: true,
             position: {
@@ -23,9 +27,7 @@ export default class extends React.Component {
 
         this.elementOffset = {
             x: 0,
-            y: 0,
-            h: 0,
-            w: 0
+            y: 0
         };
 
         this.onTouchStart = this.onTouchStart.bind(this);
@@ -63,7 +65,7 @@ export default class extends React.Component {
 
     onTouchStart(e) {
         const position = this.getDocumentRelativePosition(this.getTouchEvent(e));
-        this.elementOffset = this.getDocumentRelativeElementOffset(e.currentTarget);
+        this.init(e.currentTarget);
         this.setPositionState(position);
 
         if (this.props.isActivatedOnTouch) {
@@ -89,12 +91,15 @@ export default class extends React.Component {
     }
 
     onMouseEnter(e) {
-        this.elementOffset = this.getDocumentRelativeElementOffset(e.currentTarget);
+        this.init(e.currentTarget);
         this.activate();
         this.setPositionState(this.getDocumentRelativePosition(e))
     }
 
     onMouseMove(e) {
+        if (!this.state.isActive) {
+            this.onMouseEnter(e);
+        }
         this.setPositionState(this.getDocumentRelativePosition(e));
     }
 
@@ -106,6 +111,12 @@ export default class extends React.Component {
         this.deactivate();
     }
 
+    init(el) {
+        const { x, y, w, h } = this.getDocumentRelativeElementOffset(el);
+        this.elementOffset = { x, y };
+        this.setElementDimensionsState({ width: w, height: h });
+    }
+
     activate() {
         this.setState({
             isActive: true
@@ -142,6 +153,12 @@ export default class extends React.Component {
         });
     }
 
+    setElementDimensionsState(dimensions) {
+        this.setState({
+            elementDimensions: dimensions
+        })
+    }
+
     setPressEventTimer() {
         const {
             pressDuration,
@@ -167,7 +184,8 @@ export default class extends React.Component {
 
     getIsPositionOutside(position) {
         const { x, y } = position;
-        const { x: elx, y: ely, w: elw, h: elh } = this.elementOffset;
+        const { x: elx, y: ely } = this.elementOffset;
+        const { width: elw, height: elh } = this.state.elementDimensions;
 
         return (
             x < elx ||
@@ -228,11 +246,10 @@ export default class extends React.Component {
     }
 
     triggerOnPositionChanged() {
-        const { isPositionOutside, position } = this.state;
-        this.props.onPositionChanged({
-            isPositionOutside,
-            position
-        });
+        this.props.onPositionChanged(omit(
+            this.state,
+            'isActive'
+        ));
     }
 
     isReactComponent(reactElement) {
@@ -288,14 +305,9 @@ export default class extends React.Component {
 
     render() {
         const { children, className, mapChildProps, style } = this.props;
-        const { isActive, isPositionOutside, position } = this.state;
         const props = objectAssign(
             {},
-            mapChildProps({
-                isActive,
-                isPositionOutside,
-                position
-            }),
+            mapChildProps(this.state),
             this.getPassThroughProps()
         );
 
diff --git a/test/ReactCursorPosition.spec.js b/test/ReactCursorPosition.spec.js
index eeb89f61..1be1402f 100644
--- a/test/ReactCursorPosition.spec.js
+++ b/test/ReactCursorPosition.spec.js
@@ -25,6 +25,10 @@ describe('ReactCursorPosition', () => {
 
     it('has correct initial state', () => {
         expect(positionObserver.state()).to.deep.equal({
+            elementDimensions: {
+                width: 0,
+                height: 0
+            },
             isActive: false,
             isPositionOutside: true,
             position: {
@@ -52,6 +56,10 @@ describe('ReactCursorPosition', () => {
         renderedTree.instance().onTouchStart(getTouchEvent({ pageX: 3, pageY: 2 }));
 
         expect(childComponent.props()).to.deep.equal({
+            elementDimensions: {
+                width: 4,
+                height: 4
+            },
             isActive: true,
             isPositionOutside: false,
             position: {
@@ -62,12 +70,13 @@ describe('ReactCursorPosition', () => {
 
         renderedTree.instance().onMouseEnter(getMouseEvent());
         const el = renderedTree.find('div');
-        el.simulate('mouseMove', getMouseEvent({
-            pageX: 1,
-            pageY: 2
-        }));
+        el.simulate('mouseMove', getMouseEvent());
 
         expect(childComponent.props()).to.deep.equal({
+            elementDimensions: {
+                width: 4,
+                height: 4
+            },
             isActive: true,
             isPositionOutside: false,
             position: {
@@ -119,6 +128,26 @@ describe('ReactCursorPosition', () => {
         expect(instance.clearPressDurationTimer).to.have.been.called;
     });
 
+    it('initializes on mousemove if mouseover does not fire', () => {
+        const renderedTree = getMountedComponentTree();
+        const childComponent = renderedTree.find(GenericSpanComponent);
+
+        renderedTree.instance().onMouseMove(getMouseEvent());
+
+        expect(childComponent.props()).to.deep.equal({
+            elementDimensions: {
+                width: 4,
+                height: 4
+            },
+            isActive: true,
+            isPositionOutside: false,
+            position: {
+                x: 1,
+                y: 2
+            }
+        });
+    });
+
     describe('Add Touch Event Listeners', () => {
         it('fills touch event listeners collection', () => {
             positionObserver = getMountedComponentTree();
@@ -130,7 +159,7 @@ describe('ReactCursorPosition', () => {
             sinon.spy(utils, 'default');
             function match(call) {
                 return call.calledWithMatch(
-                    sinon.match.object,
+                    sinon.match.any,
                     /touch(start|move)/,
                     sinon.match.func,
                     sinon.match({ passive: false })
@@ -148,7 +177,7 @@ describe('ReactCursorPosition', () => {
             sinon.spy(utils, 'default');
             function match(call) {
                 return call.calledWithMatch(
-                    sinon.match.object,
+                    sinon.match.any,
                     /touch(end|cancel)/,
                     sinon.match.func,
                     sinon.match({ passive: true })
@@ -176,10 +205,11 @@ describe('ReactCursorPosition', () => {
         });
 
         it('calls removeEventListeners', () => {
-            const instance = positionObserver.instance();
+            const mountedComponent = getMountedComponentTree();
+            const instance = mountedComponent.instance();
             sinon.spy(instance, 'removeEventListeners');
 
-            positionObserver.unmount();
+            mountedComponent.unmount();
 
             expect(instance.removeEventListeners).to.have.been.called;
         });
@@ -197,6 +227,36 @@ describe('ReactCursorPosition', () => {
     });
 
     describe('Props Passed to Child Components', () => {
+        describe('elementDimensions', () => {
+            describe('touch environment', () => {
+                it('decorates child components with element dimensions', () => {
+                    const renderedTree = getMountedComponentTree({ isActivatedOnTouch: true });
+                    const childComponent = renderedTree.find(GenericSpanComponent);
+                    const instance = renderedTree.instance();
+
+                    instance.onTouchStart(touchEvent);
+
+                    expect(childComponent.props().elementDimensions).to.deep.equal({
+                        width: 4,
+                        height: 4
+                    });
+                });
+            });
+
+            describe('pointer environment', () => {
+                it('decorates child components with element dimensions', () => {
+                    const renderedTree = getMountedComponentTree();
+                    const childComponent = renderedTree.find(GenericSpanComponent);
+
+                    renderedTree.instance().onMouseEnter(getTouchEvent());
+
+                    expect(childComponent.props().elementDimensions).to.deep.equal({
+                        width: 4,
+                        height: 4
+                    });
+                });
+            });
+        });
         describe('isActive', () => {
             describe('touch environment', () => {
                 const renderedTree = getMountedComponentTree({ isActivatedOnTouch: true });
@@ -291,6 +351,10 @@ describe('ReactCursorPosition', () => {
                     });
 
                     expect(childComponent.props()).to.deep.equal({
+                        elementDimensions: {
+                            width: 4,
+                            height: 4
+                        },
                         isActive: true,
                         isPositionOutside: false,
                         position: {
@@ -309,7 +373,7 @@ describe('ReactCursorPosition', () => {
                     });
                     const childComponent = renderedTree.find(GenericSpanComponent);
                     const el = renderedTree.find('div');
-                    el.simulate('mouseEnter');
+                    renderedTree.instance().onMouseEnter(getMouseEvent());
 
                     el.simulate('mouseMove', {
                         pageX: 4,
@@ -319,6 +383,10 @@ describe('ReactCursorPosition', () => {
                     el.simulate('mouseLeave');
 
                     expect(childComponent.props()).to.deep.equal({
+                        elementDimensions: {
+                            width: 4,
+                            height: 4
+                        },
                         isActive: false,
                         isPositionOutside: true,
                         position: {
@@ -397,8 +465,9 @@ describe('ReactCursorPosition', () => {
         });
 
         it('supports mapChildProps', () => {
-            function mapChildProps({ isActive, isPositionOutside, position }) {
+            function mapChildProps({ elementDimensions, isActive, isPositionOutside, position }) {
                 return {
+                    elementDimensions,
                     isOperative: isActive,
                     isAlfresco: isPositionOutside,
                     point: position
@@ -413,6 +482,10 @@ describe('ReactCursorPosition', () => {
             tree.instance().onTouchStart(touchEvent);
 
             expect(childComponent.props()).to.deep.equal({
+                elementDimensions: {
+                    width: 4,
+                    height: 4
+                },
                 isOperative: true,
                 isAlfresco: false,
                 point: {
@@ -422,38 +495,39 @@ describe('ReactCursorPosition', () => {
             });
         });
 
-        it('supports onPositionChanged callback', (done) => {
+        it('supports onPositionChanged callback', () => {
+            const spy = sinon.spy();
             const tree = getMountedComponentTree({
                 isActivatedOnTouch: true,
-                onPositionChanged
+                onPositionChanged: spy
             });
             tree.instance().onTouchStart(touchEvent);
 
-            tree.instance().onTouchMove(touchEvent({ pageX: 2, pageY: 3}));
-
-            function onPositionChanged(point) {
-                expect(point).to.deep.equal({
-                    isPositionOutside: false,
-                    position: {
-                        x: 1,
-                        y: 2
-                    }
-                });
-                done();
-            }
+            tree.instance().onTouchMove(getTouchEvent({ pageX: 2, pageY: 3}));
+
+            expect(spy.args[1][0]).to.deep.equal({
+                elementDimensions: {
+                    width: 4,
+                    height: 4
+                },
+                isPositionOutside: false,
+                position: {
+                    x: 2,
+                    y: 3
+                }
+            });
         });
 
-        it('supports onActivationChanged callback', (done) => {
+        it('supports onActivationChanged callback', () => {
+            const spy = sinon.spy();
             const tree = getMountedComponentTree({
                 isActivatedOnTouch: true,
-                onActivationChanged
+                onActivationChanged: spy
             });
+
             tree.instance().onTouchStart(touchEvent);
 
-            function onActivationChanged({isActive}) {
-                expect(isActive).to.be.true;
-                done();
-            }
+            expect(spy.args[0][0].isActive).to.be.true;
         });
 
         it('supports shouldDecorateChildren', () => {
@@ -541,8 +615,8 @@ describe('ReactCursorPosition', () => {
                         right: 4,
                         bottom: 4,
                         left: 0,
-                        heigth: 4,
-                        width: 4
+                        width: 4,
+                        height: 4
                     }
                 }
             },
@@ -563,8 +637,8 @@ describe('ReactCursorPosition', () => {
                         right: 4,
                         bottom: 4,
                         left: 0,
-                        heigth: 4,
-                        width: 4
+                        width: 4,
+                        height: 4
                     }
                 }
             },