update(Tooltip): Render Popover's popup in Overlay component (#392)

* Refactor popover to render in Overlay with enableMouseInteraction prop * Add missing periods * Add story
airbnb · Jul 24, 2020 · e7812ce · e7812ce
1 parent cc6a932
commit e7812ce
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 18 deletions.
diff --git a/packages/core/src/components/Tooltip/index.tsx b/packages/core/src/components/Tooltip/index.tsx
@@ -28,23 +28,23 @@ export type TooltipProps = {
   content: NonNullable<React.ReactNode>;
   /** True to disable tooltip but still show children. */
   disabled?: boolean;
-  /** Manually override calculated horizontal align */
+  /** Manually override calculated horizontal align. */
   horizontalAlign?: 'center' | 'left' | 'right';
   /** True to use a light background with dark text. */
   inverted?: boolean;
   /** Callback fired when the tooltip is closed. */
   onClose?: () => void;
   /** Callback fired when the tooltip is shown. */
   onShow?: () => void;
-  /** True to enable interactive popover functionality */
+  /** True to enable interactive popover functionality. */
   popover?: boolean;
   /** True to prevent dismissmal on mouse down. */
   remainOnMouseDown?: boolean;
   /** True to toggle tooltip display on click.  */
   toggleOnClick?: boolean;
   /** True to add a dotted bottom border. */
   underlined?: boolean;
-  /** Manually override calculated vertical align */
+  /** Manually override calculated vertical align. */
   verticalAlign?: 'above' | 'below';
   /** Width of the tooltip in units. */
   width?: number;
@@ -314,23 +314,17 @@ export class Tooltip extends React.Component<TooltipProps & WithStylesProps, Too
           marginTop: above ? -(tooltipHeight + targetRect.height + distance) : distance,
           textAlign: align,
         })}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
       >
-        <div
-          className={cx(styles.content, invert && styles.content_inverted)}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
+        <div className={cx(styles.content, invert && styles.content_inverted)}>
           <Text inverted={invert}>{content}</Text>
         </div>
       </div>
     );
 
-    if (popover) {
-      return open && <div className={cx(styles.popover)}>{popupContent}</div>;
-    }
-
     return (
-      <Overlay noBackground open={open} onClose={this.handleClose}>
+      <Overlay noBackground enableMouseInteraction={popover} open={open} onClose={this.handleClose}>
         {popupContent}
       </Overlay>
     );

diff --git a/packages/core/src/components/Tooltip/story.tsx b/packages/core/src/components/Tooltip/story.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import LoremIpsum from ':storybook/components/LoremIpsum';
 import { withexpandMultiple } from '../Accordion/story';
 import Button from '../Button';
+import DataTable from '../DataTable';
+import { RendererProps } from '../DataTable/types';
 import Text from '../Text';
 import Spacing from '../Spacing';
 import Link from '../Link';
@@ -389,3 +391,52 @@ export function popoverExpandsAndShrinksWithContent() {
 popoverExpandsAndShrinksWithContent.story = {
   name: 'Popover expands and shrinks with content.',
 };
+
+export function popoverEscapesDataTableRow() {
+  return (
+    <DataTable
+      showRowDividers
+      data={[
+        { data: { name: 'John' } },
+        { data: { name: 'John' } },
+        { data: { name: 'John' } },
+        { data: { name: 'John' } },
+        { data: { name: 'John' } },
+        { data: { name: 'John' } },
+        { data: { name: 'John' } },
+        { data: { name: 'John' } },
+        { data: { name: 'John' } },
+        { data: { name: 'John' } },
+      ]}
+      keys={['name']}
+      renderers={{
+        name: ({ row }: RendererProps<{ name: string }>) => {
+          const { name } = row.rowData.data;
+
+          return (
+            <Tooltip
+              popover
+              content={
+                <>
+                  <Text bold>Certified by {name}</Text>
+                  <div>
+                    <LoremIpsum short />
+                  </div>
+                  <Link openInNewWindow href="https://github.com/airbnb/lunar">
+                    Click me!
+                  </Link>
+                </>
+              }
+            >
+              <Text>{name}</Text>
+            </Tooltip>
+          );
+        },
+      }}
+    />
+  );
+}
+
+popoverEscapesDataTableRow.story = {
+  name: 'Popover can escape a DataTable row.',
+};
diff --git a/packages/core/src/components/Tooltip/styles.ts b/packages/core/src/components/Tooltip/styles.ts
@@ -58,9 +58,4 @@ export const styleSheetTooltip: StyleSheet = ({ unit, color, pattern, ui }) => (
     color: color.base,
     backgroundColor: color.baseInverse,
   },
-
-  popover: {
-    position: 'absolute',
-    zIndex: 1,
-  },
 });