diff --git a/docs/examples/OverlayTrigger.js b/docs/examples/OverlayTrigger.js
new file mode 100644
index 0000000000..667c6ce2d2
--- /dev/null
+++ b/docs/examples/OverlayTrigger.js
@@ -0,0 +1,35 @@
+
+const Example = React.createClass({
+  render(){
+    const style = {
+      position: 'absolute',
+      backgroundColor: '#EEE',
+      border: '1px solid #CCC',
+      borderRadius: 3,
+      marginLeft: 5,
+      padding: 10
+    };
+
+    const overlay = (
+      <div style={style}>
+        <strong>Holy guacamole!</strong> Check this info.
+      </div>
+    );
+
+    return (
+      <div style={{ height: 100, position: 'relative' }}>
+        <OverlayTrigger
+          defaultOverlayShown={true}
+          placement="right"
+          trigger='click'
+          overlay={overlay}
+          container={this}
+        >
+          <Button>I am an Overlay target (click me)</Button>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+});
+
+React.render(<Example/>, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index a04a1097c7..3ac37f435e 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -306,49 +306,79 @@ const ComponentsPage = React.createClass({
 
                 </div>
 
-                {/* Tooltip */}
+                {/* overlays */}
                 <div className='bs-docs-section'>
-                  <h1 id='tooltips' className='page-header'>Tooltips <small>Tooltip</small></h1>
-                  <h2 id='tooltips-examples'>Example tooltips</h2>
+                  <h1 id='overlays' className='page-header'>Overlays <small>Overlay, Tooltip, Popover</small></h1>
 
-                  <p>Tooltip component.</p>
-                  <ReactPlayground codeText={Samples.TooltipBasic} />
+                  <h2 id='overlays-examples'>Overlay</h2>
+                  <p>
+                    Overlays allow components to be rendered and positioned to the left, right, top, or bottom of another component.
+                    They are perfect for simple tooltips or even more complicated popups.
+                  </p>
+                  <ReactPlayground codeText={Samples.Overlay} />
 
-                  <p>Positioned tooltip component.</p>
-                  <ReactPlayground codeText={Samples.TooltipPositioned} />
+                  <h2 id='overlays-examples'>Overlay Trigger</h2>
+                  <p>
+                    Often you will want to show or hide and Overlay in response to an action by its target, such as hovering over a link.
+                    Since this is such a common pattern we provide the <code>OverlayTrigger</code> component to reduce the amount of boilerplate
+                    you need to write to implement this pattern.
+                  </p>
+                  <ReactPlayground codeText={Samples.OverlayTrigger} />
 
-                  <p>Positioned tooltip in copy.</p>
-                  <ReactPlayground codeText={Samples.TooltipInCopy} />
+                  <h3 id='overlays-props'>Props</h3>
 
-                  <h3 id='tooltip-props'>Props</h3>
+                  <h4>Overlay</h4>
+                  <PropTable component='Overlay'/>
 
-                  <PropTable component='Tooltip'/>
+                  <h4>OverlayTrigger</h4>
+                  <PropTable component='OverlayTrigger'/>
 
-                </div>
+                  {/* Tooltip */}
+                  <div className='bs-docs-section'>
+                    <h2 id='tooltips' >Tooltip</h2>
+                    <p>
+                      You don't always need to create custom styling for your overlays. Bootstrap provides two great options out of the box.
+                      Tooltips can be used inside an <code>Overlay</code> Component, or an <code>OverlayTrigger</code>
+                    </p>
+                    <ReactPlayground codeText={Samples.TooltipBasic} exampleClassName='tooltip-static'/>
 
-                {/* Popover */}
-                <div className='bs-docs-section'>
-                  <h1 id='popovers' className='page-header'>Popovers <small>Popover</small></h1>
-                  <h2 id='popovers-examples'>Example popovers</h2>
+                    <p>Positioned tooltip component.</p>
+                    <ReactPlayground codeText={Samples.TooltipPositioned} />
 
-                  <p>Popover component.</p>
-                  <ReactPlayground codeText={Samples.PopoverBasic} />
+                    <p>Positioned tooltip in copy.</p>
+                    <ReactPlayground codeText={Samples.TooltipInCopy} />
 
-                  <p>Positioned popover component.</p>
-                  <ReactPlayground codeText={Samples.PopoverPositioned} />
+                    <h3 id='tooltips-props'>Props</h3>
+                    <PropTable component='Tooltip'/>
 
-                  <p>Trigger behaviors. It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
-                  <ReactPlayground codeText={Samples.PopoverTriggerBehaviors} />
+                  </div>
+
+                  {/* Popover */}
+                  <div className='bs-docs-section'>
+                    <h2 id='popovers'>Popovers</h2>
+
+                    <p>
+                      The Popover component, like the Tooltip can be used with an <code>Overlay</code> Component, or an <code>OverlayTrigger</code>.
+                      Unlike the Tooltip popovers are designed to display more reobust information about their targets.
+                    </p>
+                    <ReactPlayground codeText={Samples.PopoverBasic}/>
 
-                  <p>Popover component in container.</p>
-                  <ReactPlayground codeText={Samples.PopoverContained} exampleClassName='bs-example-popover-contained' />
+                    <p>Positioned popover component.</p>
+                    <ReactPlayground codeText={Samples.PopoverPositioned} />
 
-                  <p>Positioned popover components in scrolling container.</p>
-                  <ReactPlayground codeText={Samples.PopoverPositionedScrolling} exampleClassName='bs-example-popover-scroll' />
+                    <p>Trigger behaviors. It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
+                    <ReactPlayground codeText={Samples.PopoverTriggerBehaviors} />
 
-                  <h3 id='popover-props'>Props</h3>
+                    <p>Popover component in container.</p>
+                    <ReactPlayground codeText={Samples.PopoverContained} exampleClassName='bs-example-popover-contained' />
 
-                  <PropTable component='Popover'/>
+                    <p>Positioned popover components in scrolling container.</p>
+                    <ReactPlayground codeText={Samples.PopoverPositionedScrolling} exampleClassName='bs-example-popover-scroll' />
+
+                    <h3 id='popover-props'>Props</h3>
+
+                    <PropTable component='Popover'/>
+                  </div>
                 </div>
 
                 {/* Progress Bar */}
@@ -833,6 +863,7 @@ const ComponentsPage = React.createClass({
                     </SubNav>
                     <NavItem href='#panels' key={4}>Panels</NavItem>
                     <NavItem href='#modals' key={5}>Modals</NavItem>
+                    <NavItem href='#overlays' key={27}>Overlays</NavItem>
                     <NavItem href='#tooltips' key={6}>Tooltips</NavItem>
                     <NavItem href='#popovers' key={7}>Popovers</NavItem>
                     <NavItem href='#progress' key={8}>Progress bars</NavItem>
diff --git a/src/OverlayTrigger.js b/src/OverlayTrigger.js
index b708faf0bd..bb22fd88ae 100644
--- a/src/OverlayTrigger.js
+++ b/src/OverlayTrigger.js
@@ -1,11 +1,13 @@
 import React, { cloneElement } from 'react';
 
-import OverlayMixin from './OverlayMixin';
-import RootCloseWrapper from './RootCloseWrapper';
-
 import createChainedFunction from './utils/createChainedFunction';
 import createContextWrapper from './utils/createContextWrapper';
-import domUtils from './utils/domUtils';
+import CustomPropTypes from './utils/CustomPropTypes';
+import Overlay from './Overlay';
+import position from './utils/overlayPositionUtils';
+
+import deprecationWarning from './utils/deprecationWarning';
+import warning from 'react/lib/warning';
 
 /**
  * Check if value one is inside or equal to the of value
@@ -22,52 +24,84 @@ function isOneOf(one, of) {
 }
 
 const OverlayTrigger = React.createClass({
-  mixins: [OverlayMixin],
 
   propTypes: {
+    /**
+     * The event or action that toggles the overlay visibility.
+     */
     trigger: React.PropTypes.oneOfType([
       React.PropTypes.oneOf(['manual', 'click', 'hover', 'focus']),
       React.PropTypes.arrayOf(React.PropTypes.oneOf(['click', 'hover', 'focus']))
     ]),
-    placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+
+    /**
+     * A millisecond delay amount to show and hide the Overlay once triggered
+     */
     delay: React.PropTypes.number,
+    /**
+     * A millisecond delay amount before showing the Overlay once triggered.
+     */
     delayShow: React.PropTypes.number,
+    /**
+     * A millisecond delay amount before hiding the Overlay once triggered.
+     */
     delayHide: React.PropTypes.number,
+
+    /**
+     * The initial visibility state of the Overlay, for more nuanced visibility controll consider
+     * using the Overlay component directly.
+     */
     defaultOverlayShown: React.PropTypes.bool,
+
+    /**
+     * An element or text to overlay next to the target.
+     */
     overlay: React.PropTypes.node.isRequired,
+    /**
+     * @private
+     */
     onBlur: React.PropTypes.func,
+    /**
+     * @private
+     */
     onClick: React.PropTypes.func,
+    /**
+     * @private
+     */
     onFocus: React.PropTypes.func,
+    /**
+     * @private
+     */
     onMouseEnter: React.PropTypes.func,
+    /**
+     * @private
+     */
     onMouseLeave: React.PropTypes.func,
+
+    container: CustomPropTypes.mountable,
+
     containerPadding: React.PropTypes.number,
+    placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+
     rootClose: React.PropTypes.bool
   },
 
   getDefaultProps() {
     return {
-      placement: 'right',
-      trigger: ['hover', 'focus'],
-      containerPadding: 0
+      trigger: ['hover', 'focus']
     };
   },
 
   getInitialState() {
     return {
       isOverlayShown: this.props.defaultOverlayShown == null ?
-        false : this.props.defaultOverlayShown,
-      overlayLeft: null,
-      overlayTop: null,
-      arrowOffsetLeft: null,
-      arrowOffsetTop: null
+        false : this.props.defaultOverlayShown
     };
   },
 
   show() {
     this.setState({
       isOverlayShown: true
-    }, function() {
-      this.updateOverlayPosition();
     });
   },
 
@@ -81,77 +115,90 @@ const OverlayTrigger = React.createClass({
     if (this.state.isOverlayShown) {
       this.hide();
     } else {
-     this.show();
+      this.show();
     }
   },
 
-  renderOverlay() {
-    if (!this.state.isOverlayShown) {
-      return <span />;
-    }
+  componentDidMount(){
+    this._mountNode = document.createElement('div');
+    React.render(this._overlay, this._mountNode);
+  },
 
-    const overlay = cloneElement(
-      this.props.overlay,
-      {
-        onRequestHide: this.hide,
-        placement: this.props.placement,
-        positionLeft: this.state.overlayLeft,
-        positionTop: this.state.overlayTop,
-        arrowOffsetLeft: this.state.arrowOffsetLeft,
-        arrowOffsetTop: this.state.arrowOffsetTop
-      }
-    );
+  componentWillUnmount() {
+    React.unmountComponentAtNode(this._mountNode);
+    this._mountNode = null;
+    clearTimeout(this._hoverDelay);
+  },
 
-    if (this.props.rootClose) {
-      return (
-        <RootCloseWrapper onRootClose={this.hide}>
-          {overlay}
-        </RootCloseWrapper>
-      );
-    } else {
-      return overlay;
-    }
+  componentDidUpdate(){
+    React.render(this._overlay, this._mountNode);
+  },
+
+  getOverlay(){
+    let props = {
+      show:      this.state.isOverlayShown,
+      onHide:    this.hide,
+      rootClose: this.props.rootClose,
+      target:    ()=> React.findDOMNode(this),
+      placement: this.props.placement,
+      container: this.props.container,
+      containerPadding: this.props.containerPadding
+    };
+
+    let overlay = cloneElement(this.props.overlay, {
+      placement: props.placement,
+      container: props.container
+    });
+
+    return (
+      <Overlay {...props}>
+        { overlay }
+      </Overlay>
+    );
   },
 
   render() {
-    const child = React.Children.only(this.props.children);
-    if (this.props.trigger === 'manual') {
-      return child;
-    }
+    const trigger = React.Children.only(this.props.children);
 
-    const props = {};
+    const props = {
+      'aria-describedby': this.props.overlay.props.id
+    };
 
-    props.onClick = createChainedFunction(child.props.onClick, this.props.onClick);
-    if (isOneOf('click', this.props.trigger)) {
-      props.onClick = createChainedFunction(this.toggle, props.onClick);
-    }
+    // create in render otherwise owner is lost...
+    this._overlay = this.getOverlay();
 
-    if (isOneOf('hover', this.props.trigger)) {
-      props.onMouseEnter = createChainedFunction(this.handleDelayedShow, this.props.onMouseEnter);
-      props.onMouseLeave = createChainedFunction(this.handleDelayedHide, this.props.onMouseLeave);
-    }
+    if (this.props.trigger !== 'manual') {
+
+      props.onClick = createChainedFunction(trigger.props.onClick, this.props.onClick);
 
-    if (isOneOf('focus', this.props.trigger)) {
-      props.onFocus = createChainedFunction(this.handleDelayedShow, this.props.onFocus);
-      props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur);
+      if (isOneOf('click', this.props.trigger)) {
+        props.onClick = createChainedFunction(this.toggle, props.onClick);
+      }
+
+      if (isOneOf('hover', this.props.trigger)) {
+        warning(!(this.props.trigger === 'hover'),
+          '[react-bootstrap] Specifying only the `"hover"` trigger limits the visibilty of the overlay to just mouse users. ' +
+          'Consider also including the `"focus"` trigger so that touch and keyboard only users can see the overlay as well.');
+
+        props.onMouseOver = createChainedFunction(this.handleDelayedShow, this.props.onMouseOver);
+        props.onMouseOut = createChainedFunction(this.handleDelayedHide, this.props.onMouseOut);
+      }
+
+      if (isOneOf('focus', this.props.trigger)) {
+        props.onFocus = createChainedFunction(this.handleDelayedShow, this.props.onFocus);
+        props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur);
+      }
+    }
+    else {
+      deprecationWarning('"manual" trigger type', ' the Overlay component');
     }
 
     return cloneElement(
-      child,
+      trigger,
       props
     );
   },
 
-  componentWillUnmount() {
-    clearTimeout(this._hoverDelay);
-  },
-
-  componentDidMount() {
-    if (this.props.defaultOverlayShown) {
-      this.updateOverlayPosition();
-    }
-  },
-
   handleDelayedShow() {
     if (this._hoverDelay != null) {
       clearTimeout(this._hoverDelay);
@@ -167,10 +214,10 @@ const OverlayTrigger = React.createClass({
       return;
     }
 
-    this._hoverDelay = setTimeout(function() {
+    this._hoverDelay = setTimeout(() => {
       this._hoverDelay = null;
       this.show();
-    }.bind(this), delay);
+    }, delay);
   },
 
   handleDelayedHide() {
@@ -188,133 +235,38 @@ const OverlayTrigger = React.createClass({
       return;
     }
 
-    this._hoverDelay = setTimeout(function() {
+    this._hoverDelay = setTimeout(() => {
       this._hoverDelay = null;
       this.hide();
-    }.bind(this), delay);
-  },
-
-  updateOverlayPosition() {
-    if (!this.isMounted()) {
-      return;
-    }
-
-    this.setState(this.calcOverlayPosition());
+    }, delay);
   },
 
+  // deprecated Methods
   calcOverlayPosition() {
-    const childOffset = this.getPosition();
-
-    const overlayNode = this.getOverlayDOMNode();
-    const overlayHeight = overlayNode.offsetHeight;
-    const overlayWidth = overlayNode.offsetWidth;
-
-    const placement = this.props.placement;
-    let overlayLeft, overlayTop, arrowOffsetLeft, arrowOffsetTop;
-
-    if (placement === 'left' || placement === 'right') {
-      overlayTop = childOffset.top + (childOffset.height - overlayHeight) / 2;
-
-      if (placement === 'left') {
-        overlayLeft = childOffset.left - overlayWidth;
-      } else {
-        overlayLeft = childOffset.left + childOffset.width;
-      }
-
-      const topDelta = this._getTopDelta(overlayTop, overlayHeight);
-      overlayTop += topDelta;
-      arrowOffsetTop = 50 * (1 - 2 * topDelta / overlayHeight) + '%';
-      arrowOffsetLeft = null;
-    } else if (placement === 'top' || placement === 'bottom') {
-      overlayLeft = childOffset.left + (childOffset.width - overlayWidth) / 2;
-
-      if (placement === 'top') {
-        overlayTop = childOffset.top - overlayHeight;
-      } else {
-        overlayTop = childOffset.top + childOffset.height;
-      }
-
-      const leftDelta = this._getLeftDelta(overlayLeft, overlayWidth);
-      overlayLeft += leftDelta;
-      arrowOffsetLeft = 50 * (1 - 2 * leftDelta / overlayWidth) + '%';
-      arrowOffsetTop = null;
-    } else {
-      throw new Error(
-        'calcOverlayPosition(): No such placement of "' +
-        this.props.placement + '" found.'
-      );
-    }
-
-    return {overlayLeft, overlayTop, arrowOffsetLeft, arrowOffsetTop};
-  },
+    let overlay = this.props.overlay;
 
-  _getTopDelta(top, overlayHeight) {
-    const containerDimensions = this._getContainerDimensions();
-    const containerScroll = containerDimensions.scroll;
-    const containerHeight = containerDimensions.height;
+    deprecationWarning('OverlayTrigger.calcOverlayPosition()', 'utils/overlayPositionUtils');
 
-    const padding = this.props.containerPadding;
-    const topEdgeOffset = top - padding - containerScroll;
-    const bottomEdgeOffset = top + padding - containerScroll + overlayHeight;
-
-    if (topEdgeOffset < 0) {
-      return -topEdgeOffset;
-    } else if (bottomEdgeOffset > containerHeight) {
-      return containerHeight - bottomEdgeOffset;
-    } else {
-      return 0;
-    }
-  },
-
-  _getLeftDelta(left, overlayWidth) {
-    const containerDimensions = this._getContainerDimensions();
-    const containerWidth = containerDimensions.width;
-
-    const padding = this.props.containerPadding;
-    const leftEdgeOffset = left - padding;
-    const rightEdgeOffset = left + padding + overlayWidth;
-
-    if (leftEdgeOffset < 0) {
-      return -leftEdgeOffset;
-    } else if (rightEdgeOffset > containerWidth) {
-      return containerWidth - rightEdgeOffset;
-    } else {
-      return 0;
-    }
-  },
-
-  _getContainerDimensions() {
-    const containerNode = this.getContainerDOMNode();
-    let width, height, scroll;
-
-    if (containerNode.tagName === 'BODY') {
-      width = window.innerWidth;
-      height = window.innerHeight;
-      scroll =
-        domUtils.ownerDocument(containerNode).documentElement.scrollTop ||
-        containerNode.scrollTop;
-    } else {
-      width = containerNode.offsetWidth;
-      height = containerNode.offsetHeight;
-      scroll = containerNode.scrollTop;
-    }
-
-    return {width, height, scroll};
+    return position.calcOverlayPosition(
+        overlay.props.placement || this.props.placement
+      , React.findDOMNode(overlay)
+      , React.findDOMNode(this)
+      , React.findDOMNode(overlay.props.container || this.props.container)
+      , overlay.props.containerPadding || this.props.containerPadding
+    );
   },
 
   getPosition() {
-    const node = React.findDOMNode(this);
-    const container = this.getContainerDOMNode();
+    deprecationWarning('OverlayTrigger.getPosition()', 'utils/overlayPositionUtils');
 
-    const offset = container.tagName === 'BODY' ?
-      domUtils.getOffset(node) : domUtils.getPosition(node, container);
+    let overlay = this.props.overlay;
 
-    return {
-      ...offset,
-      height: node.offsetHeight,
-      width: node.offsetWidth
-    };
+    return position.getPosition(
+        React.findDOMNode(this)
+      , React.findDOMNode(overlay.props.container || this.props.container)
+    );
   }
+
 });
 
 /**
diff --git a/test/OverlayMixinSpec.js b/test/OverlayMixinSpec.js
index d1a52fd282..66818d48f5 100644
--- a/test/OverlayMixinSpec.js
+++ b/test/OverlayMixinSpec.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import OverlayMixin from '../src/OverlayMixin';
+import { shouldWarn } from './helpers';
 
 describe('OverlayMixin', function () {
   let instance;
@@ -17,10 +18,15 @@ describe('OverlayMixin', function () {
     }
   });
 
+
   afterEach(function() {
     if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
       React.unmountComponentAtNode(React.findDOMNode(instance));
     }
+
+    if ( console.warn.called ) {
+      shouldWarn('Overlay mixin is deprecated');
+    }
   });
 
   it('Should render overlay into container (DOMNode)', function() {
diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js
index 756cb4a46d..1d871151d8 100644
--- a/test/OverlayTriggerSpec.js
+++ b/test/OverlayTriggerSpec.js
@@ -79,103 +79,6 @@ describe('OverlayTrigger', function() {
     contextSpy.calledWith('value').should.be.true;
   });
 
-  describe('#calcOverlayPosition()', function() {
-    [
-      {
-        placement: 'left',
-        noOffset: [50, 300, null, '50%'],
-        offsetBefore: [-200, 150, null, '0%'],
-        offsetAfter: [300, 450, null, '100%']
-      },
-      {
-        placement: 'top',
-        noOffset: [200, 150, '50%', null],
-        offsetBefore: [50, -100, '0%', null],
-        offsetAfter: [350, 400, '100%', null]
-      },
-      {
-        placement: 'bottom',
-        noOffset: [200, 450, '50%', null],
-        offsetBefore: [50, 200, '0%', null],
-        offsetAfter: [350, 700, '100%', null]
-      },
-      {
-        placement: 'right',
-        noOffset: [350, 300, null, '50%'],
-        offsetBefore: [100, 150, null, '0%'],
-        offsetAfter: [600, 450, null, '100%']
-      }
-    ].forEach(function(testCase) {
-      describe(`placement = ${testCase.placement}`, function() {
-        let instance;
-
-        beforeEach(function() {
-          instance = ReactTestUtils.renderIntoDocument(
-            <OverlayTrigger
-              placement={testCase.placement}
-              containerPadding={50}
-              overlay={<div>test</div>}
-            >
-              <button>button</button>
-            </OverlayTrigger>
-          );
-
-          instance.getOverlayDOMNode = sinon.stub().returns({
-            offsetHeight: 200, offsetWidth: 200
-          });
-          instance._getContainerDimensions = sinon.stub().returns({
-            width: 600, height: 600, scroll: 100
-          });
-        });
-
-        function checkPosition(expected) {
-          const [
-            overlayLeft,
-            overlayTop,
-            arrowOffsetLeft,
-            arrowOffsetTop
-          ] = expected;
-
-          it('Should calculate the correct position', function() {
-            instance.calcOverlayPosition().should.eql(
-              {overlayLeft, overlayTop, arrowOffsetLeft, arrowOffsetTop}
-            );
-          });
-        }
-
-        describe('no viewport offset', function() {
-          beforeEach(function() {
-            instance.getPosition = sinon.stub().returns({
-              left: 250, top: 350, width: 100, height: 100
-            });
-          });
-
-          checkPosition(testCase.noOffset);
-        });
-
-        describe('viewport offset before', function() {
-          beforeEach(function() {
-            instance.getPosition = sinon.stub().returns({
-              left: 0, top: 100, width: 100, height: 100
-            });
-          });
-
-          checkPosition(testCase.offsetBefore);
-        });
-
-        describe('viewport offset after', function() {
-          beforeEach(function() {
-            instance.getPosition = sinon.stub().returns({
-              left: 500, top: 600, width: 100, height: 100
-            });
-          });
-
-          checkPosition(testCase.offsetAfter);
-        });
-      });
-    });
-  });
-
   describe('overlay types', function() {
     [
       {
@@ -227,8 +130,8 @@ describe('OverlayTrigger', function() {
             <OverlayTrigger
               overlay={<div>test</div>}
               trigger='click' rootClose={testCase.rootClose}
-              >
-              <button>button</button>
+            >
+            <button>button</button>
             </OverlayTrigger>
           );
           const overlayTrigger = React.findDOMNode(instance);