Add idealDirection to tooltip and iconWithTooltip

CHANGELOG.md

@@ -8,9 +8,10 @@
 
 ### Minor
 
-- Modal: [Docs] Fix default value for closeOnOutsideClick (#697)
 - Tooltip: Add ability to hover over tooltip and add a clickable link (#684)
+- Tooltip: Add idealDirection (#701)
 - IconWithTooltip: deprecate component (#690)
+- Modal: [Docs] Fix default value for closeOnOutsideClick (#697)
 
 ### Patch
 

docs/src/Tooltip.doc.js

@@ -25,6 +25,11 @@ card(
         required: true,
         description: 'The element to wrap with a tooltip on hover.',
       },
+      {
+        name: 'idealDirection',
+        type: `'up' | 'right' | 'down' | 'left'`,
+        description: 'Preferred direction for the Flyout to open',
+      },
       {
         name: 'inline',
         type: 'boolean',

packages/gestalt/src/Tooltip.js

@@ -11,6 +11,7 @@ const TIMEOUT = 100;
 type Props = {|
   children: React.Node,
   link?: React.Node,
+  idealDirection?: 'up' | 'right' | 'down' | 'left',
   inline?: boolean,
   text: string,
 |};
@@ -48,7 +49,13 @@ const reducer = (state, action) => {
   }
 };
 
-export default function Tooltip({ children, link, inline, text }: Props) {
+export default function Tooltip({
+  children,
+  link,
+  idealDirection = 'down',
+  inline,
+  text,
+}: Props) {
   const [state, dispatch] = React.useReducer(reducer, initialState);
   const { isOpen } = state;
 
@@ -90,7 +97,7 @@ export default function Tooltip({ children, link, inline, text }: Props) {
           anchor={anchor}
           caret={false}
           bgColor="darkGray"
-          idealDirection="down"
+          idealDirection={idealDirection}
           onDismiss={noop}
           positionRelativeToAnchor
           size={null}

packages/gestalt/src/Tooltip.jsdom.test.js

@@ -49,3 +49,13 @@ test('Tooltip should render as expected when hovered', () => {
   fireEvent.mouseEnter(container.querySelector('[aria-label]'));
   expect(getByText('This is a tooltip')).toBeVisible();
 });
+
+test('Tooltip renders with idealDirection', () => {
+  const component = create(
+    <Tooltip text="This is a tooltip" idealDirection="up">
+      <div>Hi</div>
+    </Tooltip>
+  );
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/gestalt/src/__snapshots__/Tooltip.jsdom.test.js.snap

@@ -16,3 +16,20 @@ exports[`Tooltip renders 1`] = `
   </div>
 </div>
 `;
+
+exports[`Tooltip renders with idealDirection 1`] = `
+<div
+  className="box xsDisplayBlock"
+>
+  <div
+    aria-label="This is a tooltip"
+    className="box"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <div>
+      Hi
+    </div>
+  </div>
+</div>
+`;