From 12dce0d263254859d58cffb0367f688c1fc04fa6 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Wed, 7 Apr 2021 11:16:59 -0500
Subject: [PATCH 1/8] fix(Tooltip): add newTooltip

---
 .../components/Tooltip/next/Tooltip-story.js  | 69 +++++++++++++++++++
 .../src/components/Tooltip/next/Tooltip.js    |  0
 2 files changed, 69 insertions(+)
 create mode 100644 packages/react/src/components/Tooltip/next/Tooltip-story.js
 create mode 100644 packages/react/src/components/Tooltip/next/Tooltip.js

diff --git a/packages/react/src/components/Tooltip/next/Tooltip-story.js b/packages/react/src/components/Tooltip/next/Tooltip-story.js
new file mode 100644
index 000000000000..988d6a60af1e
--- /dev/null
+++ b/packages/react/src/components/Tooltip/next/Tooltip-story.js
@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import { useId } from '../../../internal/useId';
+
+function Tooltip({ children, label, description }) {
+  // throw warning if there's more than one child
+  const child = React.Children.only(children);
+  const [visible, setVisible] = useState(false);
+  const id = useId('tooltip');
+
+  const triggerProps = {
+    onFocus: () => setVisible(true),
+    onBlur: () => setVisible(false),
+  };
+
+  if (label) {
+    triggerProps['aria-labelledby'] = id;
+  } else {
+    triggerProps['aria-describedby'] = id;
+  }
+
+  useEffect(() => {
+    function listener(event) {
+      if (event.key === 'Escape') {
+        return setVisible(false);
+      }
+    }
+    window.addEventListener('keydown', listener);
+
+    return () => {
+      window.removeEventListener('keydown', listener);
+    };
+  }, []);
+
+  return (
+    <div
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}>
+      {React.cloneElement(child, triggerProps)}
+      <span className="tooltip">
+        <span
+          hidden={!visible}
+          id={id}
+          role="tooltip"
+          aria-hidden="true"
+          className="tooltip-content">
+          {label || description}
+        </span>
+      </span>
+    </div>
+  );
+}
+
+export const Description = () => {
+  return (
+    <Tooltip description="modify account settings">
+      <button type="button">Edit</button>
+    </Tooltip>
+  );
+};
+
+export const Default = () => {
+  return (
+    <Tooltip label="close">
+      <button type="button">X</button>
+    </Tooltip>
+  );
+};
+
+export default { title: 'Experimental/unstable_Tooltip' };
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.js b/packages/react/src/components/Tooltip/next/Tooltip.js
new file mode 100644
index 000000000000..e69de29bb2d1

From 0bed65966e8359298c606830655f983746034aff Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 8 Apr 2021 10:05:42 -0500
Subject: [PATCH 2/8] chore: check-in work

---
 .../src/components/popover/_popover.scss      |  17 ++-
 .../src/components/tooltip/_tooltip.scss      |  10 ++
 .../react/src/components/Popover/index.js     |  15 +-
 .../components/Tooltip/next/Tooltip-story.js  |  82 +++--------
 .../src/components/Tooltip/next/Tooltip.js    | 138 ++++++++++++++++++
 .../useNoInteractiveChildren-test.js          |  47 ++++++
 .../src/internal/useNoInteractiveChildren.js  |  70 +++++++++
 7 files changed, 310 insertions(+), 69 deletions(-)
 create mode 100644 packages/react/src/internal/__tests__/useNoInteractiveChildren-test.js
 create mode 100644 packages/react/src/internal/useNoInteractiveChildren.js

diff --git a/packages/components/src/components/popover/_popover.scss b/packages/components/src/components/popover/_popover.scss
index e92a3403e468..05761c6e8459 100644
--- a/packages/components/src/components/popover/_popover.scss
+++ b/packages/components/src/components/popover/_popover.scss
@@ -76,7 +76,13 @@
   //-----------------------------------------------------------------------------
   // Top
   //-----------------------------------------------------------------------------
-  .#{$prefix}--popover--top,
+  .#{$prefix}--popover--top {
+    left: 50%;
+    bottom: 0;
+    text-align: center;
+    transform: translate(-50%, calc(100% + #{$popover-offset}));
+  }
+
   .#{$prefix}--popover--top-left,
   .#{$prefix}--popover--top-right {
     bottom: 0;
@@ -121,11 +127,18 @@
   //-----------------------------------------------------------------------------
   // Bottom
   //-----------------------------------------------------------------------------
+  .#{$prefix}--popover--bottom {
+    left: 50%;
+    top: 0;
+    text-align: center;
+    transform: translate(-50%, calc(100% - #{$popover-offset}));
+  }
+
   .#{$prefix}--popover--bottom,
   .#{$prefix}--popover--bottom-left,
   .#{$prefix}--popover--bottom-right {
     top: 0;
-    transform: translateY(calc(-100% - #{$popover-offset}));
+    transform: translate(calc(-100% - #{$popover-offset}));
   }
 
   .#{$prefix}--popover--caret.#{$prefix}--popover--bottom
diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index 09f38cf8df55..3437f228df54 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -706,6 +706,16 @@
     .#{$prefix}--assistive-text {
     pointer-events: all;
   }
+
+  // TODO NEXT
+  .cds--tooltip {
+    display: inline-block;
+    position: relative;
+  }
+
+  .cds--tooltip-content {
+    padding: 1rem;
+  }
 }
 
 @include exports('tooltip') {
diff --git a/packages/react/src/components/Popover/index.js b/packages/react/src/components/Popover/index.js
index 7025345217af..319abbb4edf6 100644
--- a/packages/react/src/components/Popover/index.js
+++ b/packages/react/src/components/Popover/index.js
@@ -108,20 +108,19 @@ Popover.propTypes = {
   relative: PropTypes.bool,
 };
 
-function PopoverContent({
-  as: BaseComponent = 'div',
-  className,
-  children,
-  ...rest
-}) {
+const PopoverContent = React.forwardRef(function PopoverContent(
+  { as: BaseComponent = 'div', className, children, ...rest },
+  ref
+) {
   return (
     <BaseComponent
       {...rest}
-      className={cx(`${prefix}--popover-contents`, className)}>
+      className={cx(`${prefix}--popover-contents`, className)}
+      ref={ref}>
       {children}
     </BaseComponent>
   );
-}
+});
 
 PopoverContent.propTypes = {
   /**
diff --git a/packages/react/src/components/Tooltip/next/Tooltip-story.js b/packages/react/src/components/Tooltip/next/Tooltip-story.js
index 988d6a60af1e..ee321f0e2613 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip-story.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip-story.js
@@ -1,69 +1,33 @@
-import React, { useState, useEffect } from 'react';
-import { useId } from '../../../internal/useId';
-
-function Tooltip({ children, label, description }) {
-  // throw warning if there's more than one child
-  const child = React.Children.only(children);
-  const [visible, setVisible] = useState(false);
-  const id = useId('tooltip');
-
-  const triggerProps = {
-    onFocus: () => setVisible(true),
-    onBlur: () => setVisible(false),
-  };
-
-  if (label) {
-    triggerProps['aria-labelledby'] = id;
-  } else {
-    triggerProps['aria-describedby'] = id;
-  }
-
-  useEffect(() => {
-    function listener(event) {
-      if (event.key === 'Escape') {
-        return setVisible(false);
-      }
-    }
-    window.addEventListener('keydown', listener);
-
-    return () => {
-      window.removeEventListener('keydown', listener);
-    };
-  }, []);
-
-  return (
-    <div
-      onMouseEnter={() => setVisible(true)}
-      onMouseLeave={() => setVisible(false)}>
-      {React.cloneElement(child, triggerProps)}
-      <span className="tooltip">
-        <span
-          hidden={!visible}
-          id={id}
-          role="tooltip"
-          aria-hidden="true"
-          className="tooltip-content">
-          {label || description}
-        </span>
-      </span>
-    </div>
-  );
-}
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Add24 } from '@carbon/icons-react';
+import React from 'react';
+import { Tooltip } from './Tooltip';
+
+export default {
+  title: 'Experimental/unstable_Tooltip',
+  component: Tooltip,
+};
 
-export const Description = () => {
+export const Default = () => {
   return (
-    <Tooltip description="modify account settings">
-      <button type="button">Edit</button>
+    <Tooltip label="Close">
+      <button type="button">
+        <Add24 />
+      </button>
     </Tooltip>
   );
 };
 
-export const Default = () => {
+export const Description = () => {
   return (
-    <Tooltip label="close">
-      <button type="button">X</button>
+    <Tooltip description="Modify account settings">
+      <button type="button">Edit</button>
     </Tooltip>
   );
 };
-
-export default { title: 'Experimental/unstable_Tooltip' };
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.js b/packages/react/src/components/Tooltip/next/Tooltip.js
index e69de29bb2d1..3fc295b3dd39 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.js
@@ -0,0 +1,138 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { settings } from 'carbon-components';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useRef, useEffect, useState } from 'react';
+import { Popover, PopoverContent } from '../../Popover';
+import { canUseDOM } from '../../../internal/environment';
+import { useEvent } from '../../../internal/useEvent';
+import { useId } from '../../../internal/useId';
+import { useNoInteractiveChildren } from '../../../internal/useNoInteractiveChildren';
+
+const { prefix } = settings;
+
+function Tooltip({
+  className: customClassName,
+  children,
+  label,
+  description,
+  ...rest
+}) {
+  const containerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const id = useId('tooltip');
+  const child = React.Children.only(children);
+
+  const triggerProps = {
+    onFocus: () => setOpen(true),
+    onBlur: () => setOpen(false),
+  };
+
+  if (label) {
+    triggerProps['aria-labelledby'] = id;
+  } else {
+    triggerProps['aria-describedby'] = id;
+  }
+
+  if (__DEV__) {
+    useNoInteractiveChildren(
+      tooltipRef,
+      'The Tooltip component must have no interactive content rendered by the' +
+        '`label` or `description` prop'
+    );
+  }
+
+  if (canUseDOM) {
+    useEvent(window, 'keydown', () => {
+      setOpen(false);
+    });
+  }
+
+  return (
+    <div
+      {...rest}
+      className={cx('cds--tooltip', customClassName)}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      ref={containerRef}>
+      {React.cloneElement(child, triggerProps)}
+      {open && <MouseArea from={containerRef} to={tooltipRef} />}
+      <Popover align="top" open={open} highContrast>
+        <PopoverContent
+          aria-hidden="true"
+          className={`cds--tooltip-content`}
+          id={id}
+          ref={tooltipRef}
+          role="tooltip">
+          {label || description}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+function MouseArea({ from: fromRef, to: toRef }) {
+  const [style, setStyle] = useState({});
+
+  useEffect(() => {
+    const { current: from } = fromRef;
+    const { current: to } = toRef;
+    const fromRect = from.getBoundingClientRect();
+    const toRect = to.getBoundingClientRect();
+
+    const height = toRect.top - fromRect.top;
+    const width = Math.max(toRect.width, fromRect.width);
+
+    // console.log(fromRect);
+    // console.log(toRect);
+
+    console.log(width);
+    console.log(height);
+  }, []);
+
+  return <div style={style} />;
+}
+
+Tooltip.propTypes = {
+  /**
+   * Pass in the child to which the tooltip will be applied
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide the label to be rendered inside of the Tooltip. The label will use
+   * `aria-labelledby` and will fully describe the child node that is provided.
+   * This means that if you have text in the child node, that it will not be
+   * announced to the screen reader.
+   *
+   * Note: if label and description are both provided, description will not be
+   * used
+   */
+  label: PropTypes.node,
+
+  /**
+   * Provide the description to be rendered inside of the Tooltip. The
+   * description will use `aria-describedby` and will describe the child node
+   * in addition to the text rendered inside of the child. This means that if you
+   * have text in the child node, that it will be announced alongside the
+   * description to the screen reader.
+   *
+   * Note: if label and description are both provided, label will be used and
+   * description will not be used
+   */
+  description: PropTypes.node,
+};
+
+export { Tooltip };
diff --git a/packages/react/src/internal/__tests__/useNoInteractiveChildren-test.js b/packages/react/src/internal/__tests__/useNoInteractiveChildren-test.js
new file mode 100644
index 000000000000..4cd3f6c0f908
--- /dev/null
+++ b/packages/react/src/internal/__tests__/useNoInteractiveChildren-test.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { cleanup, render } from '@testing-library/react';
+import React, { useRef } from 'react';
+import { useNoInteractiveChildren } from '../useNoInteractiveChildren';
+
+describe('useNoInteractiveChildren', () => {
+  afterEach(cleanup);
+
+  it('should render without errors if no interactive content is found', () => {
+    function TestComponent() {
+      const ref = useRef(null);
+      useNoInteractiveChildren(ref);
+      return <span ref={ref}>Content</span>;
+    }
+
+    expect(() => {
+      render(<TestComponent />);
+    }).not.toThrow();
+  });
+
+  it('should throw an error if interactive content is found', () => {
+    function TestComponent() {
+      const ref = useRef(null);
+      useNoInteractiveChildren(ref);
+      return (
+        <div ref={ref}>
+          <button type="button">Interactive</button>
+        </div>
+      );
+    }
+
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    expect(() => {
+      render(<TestComponent />);
+    }).toThrow();
+
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+});
diff --git a/packages/react/src/internal/useNoInteractiveChildren.js b/packages/react/src/internal/useNoInteractiveChildren.js
new file mode 100644
index 000000000000..6bec45d6df4b
--- /dev/null
+++ b/packages/react/src/internal/useNoInteractiveChildren.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useEffect } from 'react';
+
+export function useNoInteractiveChildren(ref, message) {
+  useEffect(() => {
+    const node = getInteractiveContent(ref.current);
+
+    if (node) {
+      throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
+    }
+  });
+}
+
+/**
+ * Determines if a given DOM node has interactive content, or is itself
+ * interactive. It returns the interactive node if one is found
+ *
+ * @param {HTMLElement} node
+ * @returns {HTMLElement}
+ */
+function getInteractiveContent(node) {
+  if (isFocusable(node)) {
+    return node;
+  }
+
+  for (const childNode of node.childNodes) {
+    const interactiveNode = getInteractiveContent(childNode);
+    if (interactiveNode) {
+      return interactiveNode;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Determines if the given element is focusable, or not
+ *
+ * @param {HTMLElement} element
+ * @returns {boolean}
+ * @see https://github.com/w3c/aria-practices/blob/0553bb51588ffa517506e2a1b2ca1422ed438c5f/examples/js/utils.js#L68
+ */
+function isFocusable(element) {
+  if (element.tabIndex < 0) {
+    return false;
+  }
+
+  if (element.disabled) {
+    return false;
+  }
+
+  switch (element.nodeName) {
+    case 'A':
+      return !!element.href && element.rel !== 'ignore';
+    case 'INPUT':
+      return element.type !== 'hidden';
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true;
+    default:
+      return false;
+  }
+}

From b0150f1b408b26971c27668f6251760a290851f5 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 14 Apr 2021 09:08:13 -0500
Subject: [PATCH 3/8] chore: check-in work

---
 .../src/components/popover/_popover.scss      | 25 +++++++++++++++++--
 .../src/components/Tooltip/next/Tooltip.js    | 23 -----------------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/packages/components/src/components/popover/_popover.scss b/packages/components/src/components/popover/_popover.scss
index 05761c6e8459..faecc7402541 100644
--- a/packages/components/src/components/popover/_popover.scss
+++ b/packages/components/src/components/popover/_popover.scss
@@ -24,6 +24,14 @@
     display: none;
   }
 
+  // Click area
+  .#{$prefix}--popover::before {
+    content: '';
+    display: block;
+    position: absolute;
+    height: $popover-offset;
+  }
+
   .#{$prefix}--popover--relative {
     position: relative;
   }
@@ -124,6 +132,13 @@
     transform: translateY(-50%) rotate(45deg);
   }
 
+  .#{$prefix}--popover--top.#{$prefix}--popover::before {
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(-100%);
+  }
+
   //-----------------------------------------------------------------------------
   // Bottom
   //-----------------------------------------------------------------------------
@@ -131,10 +146,9 @@
     left: 50%;
     top: 0;
     text-align: center;
-    transform: translate(-50%, calc(100% - #{$popover-offset}));
+    transform: translate(-50%, calc(-100% - #{$popover-offset}));
   }
 
-  .#{$prefix}--popover--bottom,
   .#{$prefix}--popover--bottom-left,
   .#{$prefix}--popover--bottom-right {
     top: 0;
@@ -168,6 +182,13 @@
     transform: translateY(50%) rotate(45deg);
   }
 
+  .#{$prefix}--popover--bottom.#{$prefix}--popover::before {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(100%);
+  }
+
   //-----------------------------------------------------------------------------
   // Left
   //-----------------------------------------------------------------------------
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.js b/packages/react/src/components/Tooltip/next/Tooltip.js
index 3fc295b3dd39..e0c9980af6e9 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.js
@@ -63,7 +63,6 @@ function Tooltip({
       onMouseLeave={() => setOpen(false)}
       ref={containerRef}>
       {React.cloneElement(child, triggerProps)}
-      {open && <MouseArea from={containerRef} to={tooltipRef} />}
       <Popover align="top" open={open} highContrast>
         <PopoverContent
           aria-hidden="true"
@@ -78,28 +77,6 @@ function Tooltip({
   );
 }
 
-function MouseArea({ from: fromRef, to: toRef }) {
-  const [style, setStyle] = useState({});
-
-  useEffect(() => {
-    const { current: from } = fromRef;
-    const { current: to } = toRef;
-    const fromRect = from.getBoundingClientRect();
-    const toRect = to.getBoundingClientRect();
-
-    const height = toRect.top - fromRect.top;
-    const width = Math.max(toRect.width, fromRect.width);
-
-    // console.log(fromRect);
-    // console.log(toRect);
-
-    console.log(width);
-    console.log(height);
-  }, []);
-
-  return <div style={style} />;
-}
-
 Tooltip.propTypes = {
   /**
    * Pass in the child to which the tooltip will be applied

From 678ca4ebd04373e9f8e84d21685fa02f6f0a45ab Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 21 Apr 2021 15:36:33 -0500
Subject: [PATCH 4/8] feat(tooltip): add delay ms props to tooltip

---
 .../components/Tooltip/next/Tooltip-story.js  | 24 ++++++-
 .../src/components/Tooltip/next/Tooltip.js    | 68 +++++++++++++++----
 .../src/internal/useNoInteractiveChildren.js  | 16 +++--
 3 files changed, 88 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/components/Tooltip/next/Tooltip-story.js b/packages/react/src/components/Tooltip/next/Tooltip-story.js
index ee321f0e2613..61b7cea134bd 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip-story.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip-story.js
@@ -7,7 +7,7 @@
 
 import { Add24 } from '@carbon/icons-react';
 import React from 'react';
-import { Tooltip } from './Tooltip';
+import { TooltipGroup, Tooltip } from './Tooltip';
 
 export default {
   title: 'Experimental/unstable_Tooltip',
@@ -31,3 +31,25 @@ export const Description = () => {
     </Tooltip>
   );
 };
+
+export const Duration = () => {
+  return (
+    <>
+      <Tooltip label="Close" enterDelayMs={500} exitDelayMs={500}>
+        <button type="button">
+          <Add24 />
+        </button>
+      </Tooltip>
+      <Tooltip label="Close" enterDelayMs={500} exitDelayMs={500}>
+        <button type="button">
+          <Add24 />
+        </button>
+      </Tooltip>
+      <Tooltip label="Close" enterDelayMs={500} exitDelayMs={500}>
+        <button type="button">
+          <Add24 />
+        </button>
+      </Tooltip>
+    </>
+  );
+};
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.js b/packages/react/src/components/Tooltip/next/Tooltip.js
index e0c9980af6e9..e73055ac7604 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.js
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect, useState } from 'react';
@@ -15,18 +14,18 @@ import { useEvent } from '../../../internal/useEvent';
 import { useId } from '../../../internal/useId';
 import { useNoInteractiveChildren } from '../../../internal/useNoInteractiveChildren';
 
-const { prefix } = settings;
-
 function Tooltip({
   className: customClassName,
   children,
   label,
   description,
+  enterDelayMs = 100,
+  exitDelayMs = 500,
   ...rest
 }) {
   const containerRef = useRef(null);
   const tooltipRef = useRef(null);
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useStateWithDelay(false);
   const id = useId('tooltip');
   const child = React.Children.only(children);
 
@@ -41,16 +40,23 @@ function Tooltip({
     triggerProps['aria-describedby'] = id;
   }
 
-  if (__DEV__) {
-    useNoInteractiveChildren(
-      tooltipRef,
-      'The Tooltip component must have no interactive content rendered by the' +
-        '`label` or `description` prop'
-    );
+  function onMouseEnter() {
+    setOpen(true, enterDelayMs);
+  }
+
+  function onMouseLeave() {
+    setOpen(false, exitDelayMs);
   }
 
+  useNoInteractiveChildren(
+    tooltipRef,
+    'The Tooltip component must have no interactive content rendered by the' +
+      '`label` or `description` prop'
+  );
+
   if (canUseDOM) {
-    useEvent(window, 'keydown', () => {
+    useEvent(window, 'keydown', (event) => {
+      event.stopPropagation();
       setOpen(false);
     });
   }
@@ -59,8 +65,8 @@ function Tooltip({
     <div
       {...rest}
       className={cx('cds--tooltip', customClassName)}
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
       ref={containerRef}>
       {React.cloneElement(child, triggerProps)}
       <Popover align="top" open={open} highContrast>
@@ -112,4 +118,40 @@ Tooltip.propTypes = {
   description: PropTypes.node,
 };
 
+function useStateWithDelay(initialState) {
+  const [state, internalSetState] = useState(initialState);
+  const [delay, setDelay] = useState(null);
+  const [callbackOrValue, setCallbackOrValue] = useState(null);
+
+  function setState(stateOrUpdater, delayMs) {
+    // Synchronous setState
+    if (delayMs === undefined || delayMs === null) {
+      setDelay(null);
+      setCallbackOrValue(null);
+      internalSetState(stateOrUpdater);
+      return;
+    }
+    setDelay(delayMs);
+    setCallbackOrValue(stateOrUpdater);
+  }
+
+  useEffect(() => {
+    if (delay === null || callbackOrValue === null) {
+      return;
+    }
+
+    const timeoutId = setTimeout(() => {
+      setDelay(null);
+      setCallbackOrValue(null);
+      internalSetState(callbackOrValue);
+    }, delay);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [delay, callbackOrValue]);
+
+  return [state, setState];
+}
+
 export { Tooltip };
diff --git a/packages/react/src/internal/useNoInteractiveChildren.js b/packages/react/src/internal/useNoInteractiveChildren.js
index 6bec45d6df4b..565b61b3382d 100644
--- a/packages/react/src/internal/useNoInteractiveChildren.js
+++ b/packages/react/src/internal/useNoInteractiveChildren.js
@@ -8,13 +8,17 @@
 import { useEffect } from 'react';
 
 export function useNoInteractiveChildren(ref, message) {
-  useEffect(() => {
-    const node = getInteractiveContent(ref.current);
+  if (__DEV__) {
+    useEffect(() => {
+      const node = getInteractiveContent(ref.current);
 
-    if (node) {
-      throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
-    }
-  });
+      if (node) {
+        throw new Error(
+          `Error: ${message}.\n\nInstead found: ${node.outerHTML}`
+        );
+      }
+    });
+  }
 }
 
 /**

From 92b4d311840f6b31d9ed8ffc2c053ee939b3d679 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 6 May 2021 16:33:27 -0500
Subject: [PATCH 5/8] chore: check-in work

---
 .../components/src/components/tooltip/_tooltip.scss    | 10 ----------
 packages/react/src/components/Popover/Popover-story.js |  2 +-
 packages/react/src/components/Tooltip/next/Tooltip.js  |  4 ++--
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index 3437f228df54..09f38cf8df55 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -706,16 +706,6 @@
     .#{$prefix}--assistive-text {
     pointer-events: all;
   }
-
-  // TODO NEXT
-  .cds--tooltip {
-    display: inline-block;
-    position: relative;
-  }
-
-  .cds--tooltip-content {
-    padding: 1rem;
-  }
 }
 
 @include exports('tooltip') {
diff --git a/packages/react/src/components/Popover/Popover-story.js b/packages/react/src/components/Popover/Popover-story.js
index 07b3ad3ca8d3..ecb0edecc9ba 100644
--- a/packages/react/src/components/Popover/Popover-story.js
+++ b/packages/react/src/components/Popover/Popover-story.js
@@ -31,7 +31,7 @@ export default {
       page: mdx,
     },
   },
-  includeStories: ['Playground'],
+  // includeStories: ['Playground'],
 };
 
 export const Default = () => {
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.js b/packages/react/src/components/Tooltip/next/Tooltip.js
index e73055ac7604..dc5cd6358174 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.js
@@ -20,7 +20,7 @@ function Tooltip({
   label,
   description,
   enterDelayMs = 100,
-  exitDelayMs = 500,
+  leaveDelayMs = 500,
   ...rest
 }) {
   const containerRef = useRef(null);
@@ -45,7 +45,7 @@ function Tooltip({
   }
 
   function onMouseLeave() {
-    setOpen(false, exitDelayMs);
+    setOpen(false, leaveDelayMs);
   }
 
   useNoInteractiveChildren(

From 176d9b65c99249ecab711ee04350c4824d4b82fe Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Fri, 7 May 2021 10:47:26 -0500
Subject: [PATCH 6/8] feat(react): add useDelayedState hook

---
 .../__tests__/useDelayedState-test.js         | 98 +++++++++++++++++++
 .../react/src/internal/useDelayedState.js     | 47 +++++++++
 2 files changed, 145 insertions(+)
 create mode 100644 packages/react/src/internal/__tests__/useDelayedState-test.js
 create mode 100644 packages/react/src/internal/useDelayedState.js

diff --git a/packages/react/src/internal/__tests__/useDelayedState-test.js b/packages/react/src/internal/__tests__/useDelayedState-test.js
new file mode 100644
index 000000000000..5771ffe21ecd
--- /dev/null
+++ b/packages/react/src/internal/__tests__/useDelayedState-test.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { useDelayedState } from '../useDelayedState';
+
+jest.useFakeTimers();
+
+describe('useDelayedState', () => {
+  afterEach(cleanup);
+
+  it('should update the state after the given delayMs', () => {
+    function TestComponent() {
+      const [count, setCount] = useDelayedState(0);
+      return (
+        <>
+          <span data-testid="count">{count}</span>
+          <button
+            type="button"
+            onClick={() => {
+              setCount((c) => c + 1, 1000);
+            }}>
+            increment
+          </button>
+        </>
+      );
+    }
+
+    render(<TestComponent />);
+    expect(screen.getByTestId('count').textContent).toBe('0');
+
+    act(() => {
+      userEvent.click(screen.getByText('increment'));
+      jest.runOnlyPendingTimers();
+    });
+
+    expect(screen.getByTestId('count').textContent).toBe('1');
+  });
+
+  it('should cancel any pending state updates if called before delayMs has passed', () => {
+    function TestComponent() {
+      const [count, setCount] = useDelayedState(0);
+      return (
+        <>
+          <span data-testid="count">{count}</span>
+          <button
+            type="button"
+            onClick={() => {
+              setCount((c) => c + 1, 1000);
+            }}>
+            increment
+          </button>
+        </>
+      );
+    }
+
+    render(<TestComponent />);
+
+    act(() => {
+      userEvent.click(screen.getByText('increment'));
+      jest.advanceTimersByTime(500);
+      userEvent.click(screen.getByText('increment'));
+      jest.runOnlyPendingTimers();
+    });
+
+    expect(screen.getByTestId('count').textContent).toBe('1');
+  });
+
+  it('should immediately call setState if no delay is given', () => {
+    function TestComponent() {
+      const [count, setCount] = useDelayedState(0);
+      return (
+        <>
+          <span data-testid="count">{count}</span>
+          <button
+            type="button"
+            onClick={() => {
+              setCount(count + 1);
+            }}>
+            increment
+          </button>
+        </>
+      );
+    }
+
+    render(<TestComponent />);
+    expect(screen.getByTestId('count').textContent).toBe('0');
+    userEvent.click(screen.getByText('increment'));
+    expect(screen.getByTestId('count').textContent).toBe('1');
+  });
+});
diff --git a/packages/react/src/internal/useDelayedState.js b/packages/react/src/internal/useDelayedState.js
new file mode 100644
index 000000000000..7172d548269e
--- /dev/null
+++ b/packages/react/src/internal/useDelayedState.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * `useDelayedState` mirrors `useState` but also allows you to add a delay to
+ * when your state updates. You can provide a second argument to `setState`,
+ * `delayMs`, which will be the time in milliseconds after which the state is
+ * updated.
+ *
+ * This hook will clean up pending timers in `useEffect` and will cancel any
+ * pending timers when a `setState` is called before the state is updated from
+ * a previous call
+ */
+export function useDelayedState(initialState) {
+  const [state, setState] = useState(initialState);
+  const timeoutId = useRef(null);
+  // We use `useCallback` to match the signature of React's `useState` which will
+  // always return the same reference for the `setState` updater
+  const setStateWithDelay = useCallback((stateToSet, delayMs = 0) => {
+    clearTimeout(timeoutId.current);
+    timeoutId.current = null;
+
+    if (delayMs === 0) {
+      setState(stateToSet);
+      return;
+    }
+
+    timeoutId.current = setTimeout(() => {
+      setState(stateToSet);
+      timeoutId.current = null;
+    }, delayMs);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeoutId.current);
+    };
+  }, []);
+
+  return [state, setStateWithDelay];
+}

From ab465691c669ec4bbbf1c927034b17452bebaec8 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Fri, 7 May 2021 11:45:53 -0500
Subject: [PATCH 7/8] chore(popover): update popover styles to work with
 tooltip

---
 .../src/components/popover/_popover.scss      | 276 +++++++++++-------
 .../src/components/tooltip/_tooltip.scss      |  20 +-
 .../components/Tooltip/next/Tooltip-story.js  |  32 +-
 .../src/components/Tooltip/next/Tooltip.js    | 103 +++----
 4 files changed, 263 insertions(+), 168 deletions(-)

diff --git a/packages/components/src/components/popover/_popover.scss b/packages/components/src/components/popover/_popover.scss
index e39d91fb8cf5..36434daeb2c5 100644
--- a/packages/components/src/components/popover/_popover.scss
+++ b/packages/components/src/components/popover/_popover.scss
@@ -11,29 +11,34 @@
 
 /// Popover component
 /// @access private
-/// @group popover
+/// @group components
 @mixin popover {
-  $popover-text-color: $text-primary;
   $popover-caret-offset: 1rem;
-  $popover-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
   $popover-offset: 8px;
 
   .#{$prefix}--popover {
+    // Specify the distance between the popover and the trigger. This value must
+    // have a unit otherwise the `calc()` expression will not work
+    // stylelint-disable-next-line length-zero-no-unit
+    --cds-popover-offset: 0rem;
+
+    // Specify the distance that the caret should be offset from the side of the
+    // popover when not centered
+    --cds-popover-caret-offset: 1rem;
+
     position: absolute;
     z-index: z('floating');
     display: none;
   }
 
-  // Click area
+  // We use a pseudo element inside of the popover to create a space between the
+  // target and the popover. This helps in situations like tooltips where you do
+  // not want the tooltip to disappear when the user moves from the target to
+  // the popover.
   .#{$prefix}--popover::before {
-    content: '';
-    display: block;
     position: absolute;
-    height: $popover-offset;
-  }
-
-  .#{$prefix}--popover--relative {
-    position: relative;
+    display: block;
+    content: '';
   }
 
   .#{$prefix}--popover--open {
@@ -48,7 +53,7 @@
     max-width: rem(368px);
     background-color: $layer;
     border-radius: 2px;
-    color: $popover-text-color;
+    color: $text-primary;
   }
 
   .#{$prefix}--popover--light .#{$prefix}--popover-contents {
@@ -60,6 +65,10 @@
     color: $text-inverse;
   }
 
+  .#{$prefix}--popover--caret {
+    --cds-popover-offset: 0.5rem;
+  }
+
   .#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,
   .#{$prefix}--popover--caret .#{$prefix}--popover-contents::after {
     position: absolute;
@@ -72,70 +81,65 @@
 
   .#{$prefix}--popover--caret .#{$prefix}--popover-contents::before {
     z-index: -1;
-    box-shadow: $popover-box-shadow;
+    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
   }
 
   // The popover's tooltip is created by drawing two 8px x 8px boxes, one for
   // rendering the box-shadow that the popover content uses and another for
   // layering on top of this box to create an effect of a popover caret with a
   // box-shadow. The layer with the box-shadow is rendered behind the popover
-  // content, while the other is rendered oabove of the popover content.
+  // content, while the other is rendered above of the popover content.
 
   //-----------------------------------------------------------------------------
   // Top
   //-----------------------------------------------------------------------------
   .#{$prefix}--popover--top {
-    left: 50%;
-    bottom: 0;
-    text-align: center;
-    transform: translate(-50%, calc(100% + #{$popover-offset}));
-  }
-
-  .#{$prefix}--popover--top-left,
-  .#{$prefix}--popover--top-right {
     bottom: 0;
-    transform: translateY(calc(100% + #{$popover-offset}));
+    left: 50%;
+    transform: translate(-50%, calc(100% + var(--cds-popover-offset)));
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--top
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--top
-    .#{$prefix}--popover-contents::after {
+  @include place-caret(top) {
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%) rotate(45deg);
   }
 
-  .#{$prefix}--popover--top-left .#{$prefix}--popover-contents {
-    margin-left: 0;
+  // Top-left
+  .#{$prefix}--popover--top-left {
+    bottom: 0;
+    left: 0;
+    transform: translateY(calc(100% + var(--cds-popover-offset)));
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--top-left
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--top-left
-    .#{$prefix}--popover-contents::after {
+  @include place-caret(top-left) {
     top: 0;
-    left: $popover-caret-offset;
-    transform: translateY(-50%) rotate(45deg);
+    left: 0;
+    transform: translate(var(--cds-popover-caret-offset), -50%) rotate(45deg);
   }
 
-  .#{$prefix}--popover--top-right .#{$prefix}--popover-contents {
-    margin-right: 0;
+  // Top-right
+  .#{$prefix}--popover--top-right {
+    right: 0;
+    bottom: 0;
+    transform: translateY(calc(100% + var(--cds-popover-offset)));
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--top-right
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--top-right
-    .#{$prefix}--popover-contents::after {
+  @include place-caret(top-right) {
     top: 0;
-    right: $popover-caret-offset;
-    transform: translateY(-50%) rotate(45deg);
+    right: 0;
+    transform: translate(calc(-1 * var(--cds-popover-caret-offset)), -50%)
+      rotate(45deg);
   }
 
-  .#{$prefix}--popover--top.#{$prefix}--popover::before {
+  // Hover area
+  .#{$prefix}--popover--top.#{$prefix}--popover::before,
+  .#{$prefix}--popover--top-left.#{$prefix}--popover::before,
+  .#{$prefix}--popover--top-right.#{$prefix}--popover::before {
     top: 0;
-    left: 0;
     right: 0;
+    left: 0;
+    height: var(--cds-popover-offset);
     transform: translateY(-100%);
   }
 
@@ -143,122 +147,172 @@
   // Bottom
   //-----------------------------------------------------------------------------
   .#{$prefix}--popover--bottom {
+    bottom: 100%;
     left: 50%;
-    top: 0;
-    text-align: center;
-    transform: translate(-50%, calc(-100% - #{$popover-offset}));
+    transform: translate(-50%, calc(-1 * var(--cds-popover-offset)));
   }
 
-  .#{$prefix}--popover--bottom-left,
-  .#{$prefix}--popover--bottom-right {
-    top: 0;
-    transform: translate(calc(-100% - #{$popover-offset}));
-  }
-
-  .#{$prefix}--popover--caret.#{$prefix}--popover--bottom
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--bottom
-    .#{$prefix}--popover-contents::after {
+  @include place-caret(bottom) {
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 50%) rotate(45deg);
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--bottom-left
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--bottom-left
-    .#{$prefix}--popover-contents::after {
+  // Bottom left
+  .#{$prefix}--popover--bottom-left {
+    bottom: 100%;
+    left: 0;
+    transform: translateY(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(bottom-left) {
     bottom: 0;
-    left: $popover-caret-offset;
-    transform: translateY(50%) rotate(45deg);
+    left: 0;
+    transform: translate(var(--cds-popover-caret-offset), 50%) rotate(45deg);
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--bottom-right
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--bottom-right
-    .#{$prefix}--popover-contents::after {
-    right: $popover-caret-offset;
+  // Bottom right
+  .#{$prefix}--popover--bottom-right {
+    right: 0;
+    bottom: 100%;
+    transform: translateY(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(bottom-right) {
+    right: 0;
     bottom: 0;
-    transform: translateY(50%) rotate(45deg);
+    transform: translate(calc(-1 * var(--cds-popover-caret-offset)), 50%)
+      rotate(45deg);
   }
 
-  .#{$prefix}--popover--bottom.#{$prefix}--popover::before {
+  // Hover area
+  .#{$prefix}--popover--bottom.#{$prefix}--popover::before,
+  .#{$prefix}--popover--bottom-left.#{$prefix}--popover::before,
+  .#{$prefix}--popover--bottom-right.#{$prefix}--popover::before {
+    right: 0;
     bottom: 0;
     left: 0;
-    right: 0;
+    height: var(--cds-popover-offset);
     transform: translateY(100%);
   }
 
   //-----------------------------------------------------------------------------
   // Left
   //-----------------------------------------------------------------------------
-  .#{$prefix}--popover--left,
-  .#{$prefix}--popover--left-top,
-  .#{$prefix}--popover--left-bottom {
-    margin-left: $popover-offset;
+  .#{$prefix}--popover--left {
+    top: 50%;
+    left: 100%;
+    transform: translate(var(--cds-popover-offset), -50%);
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--left
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--left
-    .#{$prefix}--popover-contents::after {
+  @include place-caret(left) {
     top: 50%;
     left: 0;
     transform: translate(-50%, -50%) rotate(45deg);
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--left-bottom
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--left-bottom
-    .#{$prefix}--popover-contents::after {
-    bottom: $popover-caret-offset;
+  // Left top
+  .#{$prefix}--popover--left-top {
+    top: 0;
+    left: 100%;
+    transform: translateX($popover-offset);
+  }
+
+  @include place-caret(left-top) {
+    top: 0;
     left: 0;
-    transform: translateX(-50%) rotate(45deg);
+    transform: translate(-50%, var(--cds-popover-caret-offset)) rotate(45deg);
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--left-top
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--left-top
-    .#{$prefix}--popover-contents::after {
-    top: $popover-caret-offset;
+  // Left bottom
+  .#{$prefix}--popover--left-bottom {
+    bottom: 0;
+    left: 100%;
+    transform: translateX(var(--cds-popover-offset));
+  }
+
+  @include place-caret(left-bottom) {
+    bottom: 0;
+    left: 0;
+    transform: translate(-50%, calc(-1 * var(--cds-popover-caret-offset)))
+      rotate(45deg);
+  }
+
+  // Hover area
+  .#{$prefix}--popover--left.#{$prefix}--popover::before,
+  .#{$prefix}--popover--left-top.#{$prefix}--popover::before,
+  .#{$prefix}--popover--left-bottom.#{$prefix}--popover::before {
+    top: 0;
+    bottom: 0;
     left: 0;
-    transform: translateX(-50%) rotate(45deg);
+    width: var(--cds-popover-offset);
+    transform: translateX(-100%);
   }
 
   //-----------------------------------------------------------------------------
   // Right
   //-----------------------------------------------------------------------------
-  .#{$prefix}--popover--right,
-  .#{$prefix}--popover--right-top,
-  .#{$prefix}--popover--right-bottom {
-    margin-right: $popover-offset;
+  .#{$prefix}--popover--right {
+    top: 50%;
+    right: 100%;
+    transform: translate(calc(-1 * var(--cds-popover-offset)), -50%);
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--right
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--right
-    .#{$prefix}--popover-contents::after {
+  @include place-caret(right) {
     top: 50%;
     right: 0;
     transform: translate(50%, -50%) rotate(45deg);
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--right-bottom
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--right-bottom
-    .#{$prefix}--popover-contents::after {
+  // Right top
+  .#{$prefix}--popover--right-top {
+    top: 0;
+    right: 100%;
+    transform: translateX(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(right-top) {
+    top: 0;
     right: 0;
-    bottom: $popover-caret-offset;
-    transform: translateX(50%) rotate(45deg);
+    transform: translate(50%, var(--cds-popover-caret-offset)) rotate(45deg);
   }
 
-  .#{$prefix}--popover--caret.#{$prefix}--popover--right-top
+  // Right bottom
+  .#{$prefix}--popover--right-bottom {
+    right: 100%;
+    bottom: 0;
+    transform: translateX(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(right-bottom) {
+    right: 0;
+    bottom: 0;
+    transform: translate(50%, calc(-1 * var(--cds-popover-caret-offset)))
+      rotate(45deg);
+  }
+
+  // Hover area
+  .#{$prefix}--popover--right.#{$prefix}--popover::before,
+  .#{$prefix}--popover--right-top.#{$prefix}--popover::before,
+  .#{$prefix}--popover--right-bottom.#{$prefix}--popover::before {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--cds-popover-offset);
+    transform: translateX(100%);
+  }
+}
+
+/// Helper for placing the caret inside a popover. The selectors here can get
+/// distracting in the main stylesheet, but ultimately they target the ::before
+/// and ::after pseudo-elements for the given direction. The @content block
+/// passed in should appropriately position the caret for the given direction.
+@mixin place-caret($direction) {
+  .#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
     .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--right-top
+  .#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
     .#{$prefix}--popover-contents::after {
-    top: $popover-caret-offset;
-    right: 0;
-    transform: translateX(50%) rotate(45deg);
+    @content;
   }
 }
 
diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index 0f4541d726a4..b830486e5aae 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -722,6 +722,24 @@
   }
 }
 
+/// Tooltip styles for v11
+/// @access private
+/// @group tooltip
+@mixin tooltip-next {
+  .#{$prefix}--tooltip {
+    display: inline-block;
+    position: relative;
+  }
+
+  .#{$prefix}--tooltip-content {
+    padding: $carbon--spacing-05;
+  }
+}
+
 @include exports('tooltip') {
-  @include tooltip;
+  @if feature-flag-enabled('enable-2021-release') {
+    @include tooltip-next;
+  } @else {
+    @include tooltip;
+  }
 }
diff --git a/packages/react/src/components/Tooltip/next/Tooltip-story.js b/packages/react/src/components/Tooltip/next/Tooltip-story.js
index 61b7cea134bd..da5261c29beb 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip-story.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip-story.js
@@ -6,17 +6,39 @@
  */
 
 import { Add24 } from '@carbon/icons-react';
+import { select } from '@storybook/addon-knobs';
 import React from 'react';
-import { TooltipGroup, Tooltip } from './Tooltip';
+import { Tooltip } from './Tooltip';
 
 export default {
   title: 'Experimental/unstable_Tooltip',
   component: Tooltip,
+  includeStories: [],
 };
 
 export const Default = () => {
+  const sizes = [
+    'top',
+    'top-left',
+    'top-right',
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+    'left',
+    'left-top',
+    'left-bottom',
+    'right',
+    'right-top',
+    'right-bottom',
+  ];
   return (
-    <Tooltip label="Close">
+    <Tooltip
+      align={select(
+        'Specify where the target should be relative to the tooltip',
+        sizes,
+        'top'
+      )}
+      label="Close">
       <button type="button">
         <Add24 />
       </button>
@@ -35,17 +57,17 @@ export const Description = () => {
 export const Duration = () => {
   return (
     <>
-      <Tooltip label="Close" enterDelayMs={500} exitDelayMs={500}>
+      <Tooltip label="Close" enterDelayMs={500} leaveDelayMs={500}>
         <button type="button">
           <Add24 />
         </button>
       </Tooltip>
-      <Tooltip label="Close" enterDelayMs={500} exitDelayMs={500}>
+      <Tooltip label="Close" enterDelayMs={500} leaveDelayMs={500}>
         <button type="button">
           <Add24 />
         </button>
       </Tooltip>
-      <Tooltip label="Close" enterDelayMs={500} exitDelayMs={500}>
+      <Tooltip label="Close" enterDelayMs={500} leaveDelayMs={500}>
         <button type="button">
           <Add24 />
         </button>
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.js b/packages/react/src/components/Tooltip/next/Tooltip.js
index dc5cd6358174..2e4d2f7c8f9d 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.js
@@ -5,27 +5,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef } from 'react';
 import { Popover, PopoverContent } from '../../Popover';
 import { canUseDOM } from '../../../internal/environment';
+import { useDelayedState } from '../../../internal/useDelayedState';
 import { useEvent } from '../../../internal/useEvent';
 import { useId } from '../../../internal/useId';
 import { useNoInteractiveChildren } from '../../../internal/useNoInteractiveChildren';
 
+const { prefix } = settings;
+
 function Tooltip({
+  align = 'top',
   className: customClassName,
   children,
   label,
   description,
   enterDelayMs = 100,
-  leaveDelayMs = 500,
+  leaveDelayMs = 300,
   ...rest
 }) {
   const containerRef = useRef(null);
   const tooltipRef = useRef(null);
-  const [open, setOpen] = useStateWithDelay(false);
+  const [open, setOpen] = useDelayedState(false);
   const id = useId('tooltip');
   const child = React.Children.only(children);
 
@@ -55,6 +60,7 @@ function Tooltip({
   );
 
   if (canUseDOM) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEvent(window, 'keydown', (event) => {
       event.stopPropagation();
       setOpen(false);
@@ -64,15 +70,15 @@ function Tooltip({
   return (
     <div
       {...rest}
-      className={cx('cds--tooltip', customClassName)}
+      className={cx(`${prefix}--tooltip`, customClassName)}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       ref={containerRef}>
       {React.cloneElement(child, triggerProps)}
-      <Popover align="top" open={open} highContrast>
+      <Popover align={align} open={open} highContrast>
         <PopoverContent
           aria-hidden="true"
-          className={`cds--tooltip-content`}
+          className={`${prefix}--tooltip-content`}
           id={id}
           ref={tooltipRef}
           role="tooltip">
@@ -84,6 +90,27 @@ function Tooltip({
 }
 
 Tooltip.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf([
+    'top',
+    'top-left',
+    'top-right',
+
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+
+    'left',
+    'left-bottom',
+    'left-top',
+
+    'right',
+    'right-bottom',
+    'right-top',
+  ]),
+
   /**
    * Pass in the child to which the tooltip will be applied
    */
@@ -94,17 +121,6 @@ Tooltip.propTypes = {
    */
   className: PropTypes.string,
 
-  /**
-   * Provide the label to be rendered inside of the Tooltip. The label will use
-   * `aria-labelledby` and will fully describe the child node that is provided.
-   * This means that if you have text in the child node, that it will not be
-   * announced to the screen reader.
-   *
-   * Note: if label and description are both provided, description will not be
-   * used
-   */
-  label: PropTypes.node,
-
   /**
    * Provide the description to be rendered inside of the Tooltip. The
    * description will use `aria-describedby` and will describe the child node
@@ -116,42 +132,27 @@ Tooltip.propTypes = {
    * description will not be used
    */
   description: PropTypes.node,
-};
 
-function useStateWithDelay(initialState) {
-  const [state, internalSetState] = useState(initialState);
-  const [delay, setDelay] = useState(null);
-  const [callbackOrValue, setCallbackOrValue] = useState(null);
-
-  function setState(stateOrUpdater, delayMs) {
-    // Synchronous setState
-    if (delayMs === undefined || delayMs === null) {
-      setDelay(null);
-      setCallbackOrValue(null);
-      internalSetState(stateOrUpdater);
-      return;
-    }
-    setDelay(delayMs);
-    setCallbackOrValue(stateOrUpdater);
-  }
-
-  useEffect(() => {
-    if (delay === null || callbackOrValue === null) {
-      return;
-    }
-
-    const timeoutId = setTimeout(() => {
-      setDelay(null);
-      setCallbackOrValue(null);
-      internalSetState(callbackOrValue);
-    }, delay);
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip
+   */
+  enterDelayMs: PropTypes.number,
 
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [delay, callbackOrValue]);
+  /**
+   * Provide the label to be rendered inside of the Tooltip. The label will use
+   * `aria-labelledby` and will fully describe the child node that is provided.
+   * This means that if you have text in the child node, that it will not be
+   * announced to the screen reader.
+   *
+   * Note: if label and description are both provided, description will not be
+   * used
+   */
+  label: PropTypes.node,
 
-  return [state, setState];
-}
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  leaveDelayMs: PropTypes.number,
+};
 
 export { Tooltip };

From a01c57b8774b86a2ce03974657beb89a5adc6424 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Fri, 7 May 2021 11:48:27 -0500
Subject: [PATCH 8/8] chore(popover): revert story includeStories change

---
 packages/react/src/components/Popover/Popover-story.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Popover/Popover-story.js b/packages/react/src/components/Popover/Popover-story.js
index ecb0edecc9ba..07b3ad3ca8d3 100644
--- a/packages/react/src/components/Popover/Popover-story.js
+++ b/packages/react/src/components/Popover/Popover-story.js
@@ -31,7 +31,7 @@ export default {
       page: mdx,
     },
   },
-  // includeStories: ['Playground'],
+  includeStories: ['Playground'],
 };
 
 export const Default = () => {