feat(Popover/Tooltip): add boundariesElement prop (reactstrap#1149)

Closes reactstrap#1118

docs/lib/Components/PopoversPage.js

@@ -30,6 +30,8 @@ export default class PopoversPage extends React.Component {
   isOpen:  PropTypes.bool,
   // callback for toggling isOpen in the controlling component
   toggle:  PropTypes.func,
+  // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
+  boundariesElement: PropTypes.string,
   target:  PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,

docs/lib/Components/TooltipsPage.js

@@ -30,6 +30,8 @@ export default class TooltipsPage extends React.Component {
         <pre>
           <PrismCode className="language-jsx">
 {`Tooltip.propTypes = {
+  // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
+  boundariesElement: PropTypes.string,
   // boolean to control the state of the tooltip
   isOpen: PropTypes.bool,
   hideArrow: PropTypes.bool,

src/Popover.js

@@ -16,6 +16,7 @@ const propTypes = {
     PropTypes.func,
     DOMElement,
   ]),
+  boundariesElement: PropTypes.string,
   isOpen: PropTypes.bool,
   disabled: PropTypes.bool,
   hideArrow: PropTypes.bool,
@@ -182,6 +183,7 @@ class Popover extends React.Component {
         container={this.props.container}
         modifiers={this.props.modifiers}
         offset={this.props.offset}
+        boundariesElement={this.props.boundariesElement}
       >
         <div {...attributes} className={classes} ref={this.getRef} />
       </PopperContent>

src/PopperContent.js

@@ -21,9 +21,11 @@ const propTypes = {
   container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
   target: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]).isRequired,
   modifiers: PropTypes.object,
+  boundariesElement: PropTypes.string,
 };
 
 const defaultProps = {
+  boundariesElement: 'scrollParent',
   placement: 'auto',
   hideArrow: false,
   isOpen: false,
@@ -144,6 +146,7 @@ class PopperContent extends React.Component {
       tag,
       container,
       modifiers,
+      boundariesElement,
       ...attrs
     } = this.props;
     const arrowClassName = mapToCssModules(classNames(
@@ -159,6 +162,7 @@ class PopperContent extends React.Component {
     const extendedModifiers = {
       offset: { offset },
       flip: { enabled: flip, behavior: fallbackPlacement },
+      preventOverflow: { boundariesElement },
       update: {
         enabled: true,
         order: 950,

src/Tooltip.js

@@ -19,6 +19,7 @@ const propTypes = {
   isOpen: PropTypes.bool,
   disabled: PropTypes.bool,
   hideArrow: PropTypes.bool,
+  boundariesElement: PropTypes.string,
   className: PropTypes.string,
   innerClassName: PropTypes.string,
   arrowClassName: PropTypes.string,
@@ -247,6 +248,7 @@ class Tooltip extends React.Component {
         target={this.props.target}
         isOpen={this.props.isOpen}
         hideArrow={this.props.hideArrow}
+        boundariesElement={this.props.boundariesElement}
         placement={this.props.placement}
         placementPrefix={this.props.placementPrefix}
         arrowClassName={this.props.arrowClassName}

src/__tests__/Uncontrolled.spec.js

@@ -109,4 +109,9 @@ describe('UncontrolledTooltip', () => {
     tooltip.update();
     expect(tooltip.prop('isOpen')).toBe(true);
   });
+
+  it('should have boundary set to string', () => {
+    const tooltip = shallow(<UncontrolledTooltip boundariesElement="window" target="blah">Yo!</UncontrolledTooltip>);
+    expect(tooltip.prop('boundariesElement')).toBe('window');
+  });
 });