feat(Popover/Tooltip): ability to pass through flip prop (#1443)

Popovers and tooltips by default get flipped by Popper if they're close to
the edge of the screen; this allows us to override that

docs/lib/Components/PopoversPage.js

@@ -77,7 +77,16 @@ export default class PopoversPage extends React.Component {
   offset: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
-  ])
+  ]),
+
+  // Whether to show/hide the popover with a fade effect
+  // (default: true)
+  fade: PropTypes.bool,
+
+  // Whether to flip the direction of the popover if too close to
+  // the container edge
+  // (default: true)
+  flip: PropTypes.bool,
 }`}
           </PrismCode>
         </pre>

docs/lib/Components/TooltipsPage.js

@@ -88,7 +88,16 @@ export default class TooltipsPage extends React.Component {
     PropTypes.func,
     PropTypes.string,
     PropTypes.object
-  ])
+  ]),
+
+  // Whether to show/hide the popover with a fade effect
+  // (default: true)
+  fade: PropTypes.bool,
+
+  // Whether to flip the direction of the popover if too close to
+  // the container edge
+  // (default: true)
+  flip: PropTypes.bool,
 }`}
           </PrismCode>
         </pre>

src/TooltipPopoverWrapper.js

@@ -39,6 +39,7 @@ export const propTypes = {
   ]),
   trigger: PropTypes.string,
   fade: PropTypes.bool,
+  flip: PropTypes.bool,
 };
 
 const DEFAULT_DELAYS = {
@@ -312,6 +313,7 @@ class TooltipPopoverWrapper extends React.Component {
       modifiers,
       offset,
       fade,
+      flip,
     } = this.props;
 
     const attributes = omit(this.props, Object.keys(propTypes));
@@ -337,6 +339,7 @@ class TooltipPopoverWrapper extends React.Component {
         cssModule={cssModule}
         onClosed={this.onClosed}
         fade={fade}
+        flip={flip}
       >
         <div
           {...attributes}

src/__tests__/TooltipPopoverWrapper.spec.js

@@ -236,7 +236,7 @@ describe('Tooltip', () => {
       </TooltipPopoverWrapper>,
       { attachTo: container }
     );
-    
+
     expect(isOpen).toBe(false);
     target.dispatchEvent(new Event('touchstart'));
     jest.runTimersToTime(20);
@@ -256,7 +256,7 @@ describe('Tooltip', () => {
       </TooltipPopoverWrapper>,
       { attachTo: container }
     );
-    
+
     expect(isOpen).toBe(true);
     target.dispatchEvent(new Event('touchstart'));
     jest.runTimersToTime(20);
@@ -315,6 +315,17 @@ describe('Tooltip', () => {
     wrapper.unmount();
   });
 
+  it('should pass down flip', () => {
+    const wrapper = mount(
+      <TooltipPopoverWrapper isOpen target="target" flip={false}>
+        Tooltip Content
+      </TooltipPopoverWrapper>
+    );
+
+    expect(wrapper.find(PopperContent).props().flip).toBe(false);
+    wrapper.unmount();
+  });
+
   it('should not call props.toggle when disabled ', () => {
     const props = createSpyObj('props', ['toggle']);
     const event = createSpyObj('event', ['preventDefault']);