From b36713823c693cac6b33760c989d94f102254066 Mon Sep 17 00:00:00 2001
From: Anna Scheuler Kammeyer <33579665+scheul93@users.noreply.github.com>
Date: Thu, 3 Mar 2022 15:21:22 -0700
Subject: [PATCH] [WNMGDS-1443] updating tooltip to support close button
 (#1625)

* updating tooltip to support close button

* updated tooltip story

* unit tests for new tooltip functionality

* updated tooltip tests

* updated snapshot tests
---
 .../src/components/Drawer/DrawerToggle.tsx    |   2 +-
 .../components/Tooltip/Tooltip.stories.jsx    |  15 +
 .../src/components/Tooltip/Tooltip.test.jsx   | 114 ++++-
 .../src/components/Tooltip/Tooltip.tsx        |  64 ++-
 .../__snapshots__/Tooltip.test.jsx.snap       | 390 +++++++++---------
 .../{Drawer => utilities}/usePrevious.ts      |   0
 .../src/styles/components/_Tooltip.scss       |  18 +
 7 files changed, 385 insertions(+), 218 deletions(-)
 rename packages/design-system/src/components/{Drawer => utilities}/usePrevious.ts (100%)

diff --git a/packages/design-system/src/components/Drawer/DrawerToggle.tsx b/packages/design-system/src/components/Drawer/DrawerToggle.tsx
index cff5de15da..db69ac44a6 100644
--- a/packages/design-system/src/components/Drawer/DrawerToggle.tsx
+++ b/packages/design-system/src/components/Drawer/DrawerToggle.tsx
@@ -1,7 +1,7 @@
 import Button, { ButtonProps } from '../Button/Button';
 import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import usePrevious from './usePrevious';
+import usePrevious from '../utilities/usePrevious';
 
 export type DrawerToggleProps = ButtonProps & {
   /**
diff --git a/packages/design-system/src/components/Tooltip/Tooltip.stories.jsx b/packages/design-system/src/components/Tooltip/Tooltip.stories.jsx
index 4ae471072f..229596218e 100644
--- a/packages/design-system/src/components/Tooltip/Tooltip.stories.jsx
+++ b/packages/design-system/src/components/Tooltip/Tooltip.stories.jsx
@@ -80,3 +80,18 @@ InteractiveContent.args = {
   ),
   children: 'Tooltip with interactive content',
 };
+
+export const TooltipWithCloseButton = Template.bind({});
+TooltipWithCloseButton.args = {
+  dialog: true,
+  title: (
+    <>
+      Entering your Social Security Number helps the plan confirm with your state that you have
+      Medicaid.
+    </>
+  ),
+  children: 'Tooltip trigger',
+  contentHeading: 'Really long Heading for tooltip',
+  showCloseButton: true,
+  className: 'ds-c-button',
+};
diff --git a/packages/design-system/src/components/Tooltip/Tooltip.test.jsx b/packages/design-system/src/components/Tooltip/Tooltip.test.jsx
index a2de67a4a5..3b34f8a206 100644
--- a/packages/design-system/src/components/Tooltip/Tooltip.test.jsx
+++ b/packages/design-system/src/components/Tooltip/Tooltip.test.jsx
@@ -1,45 +1,129 @@
-import { mount, shallow } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
 import Tooltip from './Tooltip';
 import TooltipIcon from './TooltipIcon';
 
 jest.mock('@popperjs/core');
 
+const triggerAriaLabelText = 'tooltip trigger';
 const defaultProps = {
   children: <TooltipIcon />,
   className: 'ds-c-tooltip__trigger-icon',
   title: 'Tooltip body content',
+  ariaLabel: triggerAriaLabelText,
 };
 
-function render(customProps = {}, deep = false) {
+function renderTooltip(customProps = {}) {
   const props = { ...defaultProps, ...customProps };
-  const component = <Tooltip {...props} />;
-  return {
-    props: props,
-    wrapper: deep ? mount(component) : shallow(component),
-  };
+  return render(<Tooltip {...props} />);
 }
 
 describe('Tooltip', function () {
   it('renders default trigger icon', () => {
-    const tooltip = render();
-    expect(tooltip.wrapper).toMatchSnapshot();
+    const { queryByLabelText } = renderTooltip();
+    const triggerEl = queryByLabelText(triggerAriaLabelText);
+    expect(triggerEl).toMatchSnapshot();
   });
 
   it('renders inverse tooltip', () => {
-    const tooltip = render({ inversed: true });
-    expect(tooltip.wrapper).toMatchSnapshot();
+    const { asFragment } = renderTooltip({ inversed: true });
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('renders custom trigger component', () => {
-    const tooltip = render({
+    const { queryByLabelText } = renderTooltip({
       component: 'a',
     });
-    expect(tooltip.wrapper).toMatchSnapshot();
+    const triggerEl = queryByLabelText(triggerAriaLabelText);
+    expect(triggerEl).toMatchSnapshot();
   });
 
   it('renders dialog tooltip', () => {
-    const tooltip = render({ dialog: true });
-    expect(tooltip.wrapper).toMatchSnapshot();
+    const { queryByRole, getByLabelText } = renderTooltip({ dialog: true });
+    const tooltipTrigger = getByLabelText(triggerAriaLabelText);
+    fireEvent.click(tooltipTrigger);
+    const contentEl = queryByRole('dialog');
+    expect(contentEl).not.toBeNull();
+    expect(contentEl).toMatchSnapshot();
+  });
+
+  describe('tooltip with close', () => {
+    it('renders a close button', () => {
+      const { getByLabelText } = renderTooltip({ dialog: true, showCloseButton: true });
+      const closeButton = getByLabelText('Close', { selector: 'button' });
+      expect(closeButton).toBeDefined();
+    });
+
+    it('renders heading element', () => {
+      const { queryByRole, getByLabelText } = renderTooltip({
+        dialog: true,
+        contentHeading: 'Tooltip heading content',
+      });
+      const tooltipTrigger = getByLabelText(triggerAriaLabelText);
+      fireEvent.click(tooltipTrigger);
+      const contentEl = queryByRole('dialog');
+      expect(contentEl).toMatchSnapshot();
+    });
+
+    it('renders heading element and close button', () => {
+      const { queryByRole, getByLabelText } = renderTooltip({
+        dialog: true,
+        contentHeading: 'Tooltip heading content',
+        showCloseButton: true,
+      });
+      const tooltipTrigger = getByLabelText(triggerAriaLabelText);
+      fireEvent.click(tooltipTrigger);
+      const contentEl = queryByRole('dialog');
+      expect(contentEl).toMatchSnapshot();
+    });
+
+    it('should call onClose when close button is clicked', () => {
+      const onClose = jest.fn();
+      const { getByLabelText } = renderTooltip({
+        dialog: true,
+        showCloseButton: true,
+        onClose,
+      });
+      const tooltipTrigger = getByLabelText(triggerAriaLabelText);
+      fireEvent.click(tooltipTrigger);
+      const closeButton = getByLabelText('Close', { selector: 'button' });
+      fireEvent.click(closeButton);
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    it('should close tooltip when onClose is clicked', () => {
+      const { getByLabelText, queryByRole } = renderTooltip({
+        dialog: true,
+        showCloseButton: true,
+      });
+      const tooltipTrigger = getByLabelText(triggerAriaLabelText);
+      fireEvent.click(tooltipTrigger);
+      const closeButton = getByLabelText('Close', { selector: 'button' });
+      fireEvent.click(closeButton);
+      const tooltipContent = queryByRole('dialog');
+      expect(tooltipContent).toBeNull();
+    });
+
+    it('should return focus back to trigger when closed', () => {
+      const { getByLabelText } = renderTooltip({
+        dialog: true,
+        showCloseButton: true,
+      });
+      const tooltipTrigger = getByLabelText(triggerAriaLabelText);
+      fireEvent.click(tooltipTrigger);
+      const closeButton = getByLabelText('Close', { selector: 'button' });
+      fireEvent.click(closeButton);
+      expect(tooltipTrigger).toEqual(document.activeElement);
+    });
+
+    it('close button should take custom aria label', () => {
+      const { queryByLabelText } = renderTooltip({
+        dialog: true,
+        showCloseButton: true,
+        closeButtonLabel: 'custom close label text',
+      });
+      const closeButton = queryByLabelText('custom close label text');
+      expect(closeButton).not.toBeNull();
+    });
   });
 });
diff --git a/packages/design-system/src/components/Tooltip/Tooltip.tsx b/packages/design-system/src/components/Tooltip/Tooltip.tsx
index cf72a7f32d..a079afd8e1 100644
--- a/packages/design-system/src/components/Tooltip/Tooltip.tsx
+++ b/packages/design-system/src/components/Tooltip/Tooltip.tsx
@@ -12,6 +12,9 @@ import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
 import classNames from 'classnames';
 import { createPopper, Placement } from '@popperjs/core';
 import uniqueId from 'lodash/uniqueId';
+import { Button } from '../Button';
+import { CloseIconThin } from '../Icons';
+import usePrevious from '../utilities/usePrevious';
 
 export interface TooltipProps {
   /**
@@ -26,14 +29,23 @@ export interface TooltipProps {
    * Tooltip trigger content
    */
   children: React.ReactNode;
+  /**
+   * Classes applied to the tooltip trigger
+   */
+  className?: string;
+  /**
+   * Configurable text for the aria-label of the tooltip's close button
+   */
+  closeButtonLabel?: string;
   /**
    * When provided, will render the passed in component for the tooltip trigger. Typically will be a `button`, `a`, or rarely an `input` element.
    */
   component?: React.ReactElement<any> | any | ((...args: any[]) => any);
   /**
-   * Classes applied to the tooltip trigger
+   * Heading for the tooltip content. This will show above 'title' content and inline with 'closeButton' if closeButton is set
    */
-  className?: string;
+  contentHeading?: React.ReactNode;
+
   /**
    * Tooltip that behaves like a dialog, i.e. a tooltip that only appears on click, traps focus, and contains interactive content. For more information, see Deque's [tooltip dialog documentation](https://dequeuniversity.com/library/aria/tooltip-dialog)
    */
@@ -67,6 +79,10 @@ export interface TooltipProps {
    * `maxWidth` styling applied to the tooltip body
    */
   maxWidth?: string;
+  /**
+   * Determines if close button is shown in tooltip. It is recommended that the close button is only used if `dialog=true`
+   */
+  showCloseButton?: boolean;
   /**
    * Content inside the tooltip body or popover. If contains interactive elements use the `dialog` prop.
    */
@@ -97,6 +113,7 @@ export const Tooltip = (props: TooltipProps) => {
   const [active, setActive] = useState<boolean>(false);
   const [isHover, setIsHover] = useState<boolean>(false);
   const [isMobile, setIsMobile] = useState<boolean>(false);
+  const prevActiveStateVar = usePrevious(active);
 
   const handleEscapeKey = (event: KeyboardEvent) => {
     const ESCAPE_KEY = 27;
@@ -115,6 +132,12 @@ export const Tooltip = (props: TooltipProps) => {
     }
   };
 
+  const handleCloseButtonClick = () => {
+    if (active && (props.dialog || isMobile)) {
+      setActive(false);
+    }
+  };
+
   const handleBlur = (event: MouseEvent) => {
     setTimeout(() => {
       const focusedInsideTrigger = triggerElement.current?.contains(event.target);
@@ -160,6 +183,13 @@ export const Tooltip = (props: TooltipProps) => {
       props.onOpen && props.onOpen();
     } else {
       props.onClose && props.onClose();
+
+      // if tooltip goes from active to inactive and is the dialog version, focus the trigger
+      if (prevActiveStateVar && (props.dialog || isMobile) && props.showCloseButton) {
+        if (triggerElement && triggerElement.current) {
+          triggerElement.current.focus();
+        }
+      }
     }
   }, [active]);
 
@@ -188,6 +218,9 @@ export const Tooltip = (props: TooltipProps) => {
       title,
       transitionDuration,
       zIndex,
+      showCloseButton,
+      closeButtonLabel,
+      contentHeading,
       ...others
     } = props;
 
@@ -238,11 +271,14 @@ export const Tooltip = (props: TooltipProps) => {
 
   const renderContent = (props: TooltipProps): React.ReactElement => {
     const {
+      closeButtonLabel,
       dialog,
+      contentHeading,
       inversed,
       interactiveBorder,
       placement,
       maxWidth,
+      showCloseButton,
       title,
       transitionDuration,
       zIndex,
@@ -270,7 +306,29 @@ export const Tooltip = (props: TooltipProps) => {
         {...eventHandlers}
       >
         <span className="ds-c-tooltip__arrow" data-popper-arrow />
-        <div className="ds-c-tooltip__content ds-base">{title}</div>
+        <div className="ds-c-tooltip__content ds-base">
+          {contentHeading || showCloseButton ? (
+            <div
+              className={classNames('ds-c-tooltip__header', {
+                'ds-c-tooltip__header--right': !contentHeading,
+              })}
+            >
+              {contentHeading}
+              {showCloseButton && (
+                <Button
+                  variation="transparent"
+                  size="small"
+                  className="ds-c-tooltip__close-button"
+                  onClick={handleCloseButtonClick}
+                  aria-label={closeButtonLabel || 'Close'}
+                >
+                  <CloseIconThin />
+                </Button>
+              )}
+            </div>
+          ) : null}
+          {title}
+        </div>
         {!dialog && (
           <span className="ds-c-tooltip__interactive-border" style={interactiveBorderStyle} />
         )}
diff --git a/packages/design-system/src/components/Tooltip/__snapshots__/Tooltip.test.jsx.snap b/packages/design-system/src/components/Tooltip/__snapshots__/Tooltip.test.jsx.snap
index 14f2dfa4bd..4e7c4e238d 100644
--- a/packages/design-system/src/components/Tooltip/__snapshots__/Tooltip.test.jsx.snap
+++ b/packages/design-system/src/components/Tooltip/__snapshots__/Tooltip.test.jsx.snap
@@ -1,245 +1,237 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tooltip renders custom trigger component 1`] = `
-<div
-  className="ds-c-tooltip__container"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
+<a
+  aria-describedby="trigger_5"
+  aria-label="tooltip trigger"
+  class="ds-base ds-c-tooltip__trigger ds-c-tooltip__trigger-icon"
+  role="button"
+  tabindex="0"
 >
-  <a
-    aria-describedby="trigger_3"
-    className="ds-base ds-c-tooltip__trigger ds-c-tooltip__trigger-icon"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onTouchStart={[Function]}
-    role="button"
-    tabIndex={0}
-  >
-    <TooltipIcon />
-  </a>
-  <CSSTransition
-    classNames="ds-c-tooltip"
-    in={false}
-    timeout={250}
+  <span
+    class="ds-c-tooltip-icon__container"
   >
-    <div
-      aria-hidden={true}
-      className="ds-c-tooltip"
-      data-placement="top"
-      id="trigger_3"
-      onBlur={[Function]}
-      role="tooltip"
-      style={
-        Object {
-          "maxWidth": "300px",
-          "zIndex": 9999,
-        }
-      }
-      tabIndex={null}
+    <svg
+      aria-hidden="true"
+      aria-labelledby="icon-6__title"
+      class="ds-c-icon ds-c-icon--info-circle-thin ds-c-tooltip-icon"
+      focusable="false"
+      id="icon-6"
+      role="img"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <span
-        className="ds-c-tooltip__arrow"
-        data-popper-arrow={true}
-      />
-      <div
-        className="ds-c-tooltip__content ds-base"
+      <title
+        id="icon-6__title"
       >
-        Tooltip body content
-      </div>
-      <span
-        className="ds-c-tooltip__interactive-border"
-        style={
-          Object {
-            "border": "15px solid transparent",
-            "left": "-15px",
-            "top": "-15px",
-            "zIndex": -999,
-          }
-        }
+        Information
+      </title>
+      <path
+        d="M8 16c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm1-3.7V6.4H7v5.9h2zM7 4.9c0 .6.3.9 1 .9s1-.3 1-.9c0-.3-.1-.5-.2-.7-.2-.1-.5-.2-.8-.2-.3 0-.6.1-.8.2-.1.2-.2.4-.2.7z"
+        fill-rule="nonzero"
       />
-    </div>
-  </CSSTransition>
-</div>
+    </svg>
+  </span>
+</a>
 `;
 
 exports[`Tooltip renders default trigger icon 1`] = `
+<button
+  aria-describedby="trigger_1"
+  aria-label="tooltip trigger"
+  class="ds-base ds-c-tooltip__trigger ds-c-tooltip__trigger-icon"
+  type="button"
+>
+  <span
+    class="ds-c-tooltip-icon__container"
+  >
+    <svg
+      aria-hidden="true"
+      aria-labelledby="icon-2__title"
+      class="ds-c-icon ds-c-icon--info-circle-thin ds-c-tooltip-icon"
+      focusable="false"
+      id="icon-2"
+      role="img"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title
+        id="icon-2__title"
+      >
+        Information
+      </title>
+      <path
+        d="M8 16c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm1-3.7V6.4H7v5.9h2zM7 4.9c0 .6.3.9 1 .9s1-.3 1-.9c0-.3-.1-.5-.2-.7-.2-.1-.5-.2-.8-.2-.3 0-.6.1-.8.2-.1.2-.2.4-.2.7z"
+        fill-rule="nonzero"
+      />
+    </svg>
+  </span>
+</button>
+`;
+
+exports[`Tooltip renders dialog tooltip 1`] = `
 <div
-  className="ds-c-tooltip__container"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
+  aria-hidden="false"
+  class="ds-c-tooltip ds-c-tooltip-enter ds-c-tooltip-enter-active"
+  data-placement="top"
+  id="trigger_7"
+  role="dialog"
+  style="max-width: 300px; z-index: 9999;"
+  tabindex="-1"
 >
-  <button
-    aria-describedby="trigger_1"
-    className="ds-base ds-c-tooltip__trigger ds-c-tooltip__trigger-icon"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onTouchStart={[Function]}
-    type="button"
+  <span
+    class="ds-c-tooltip__arrow"
+    data-popper-arrow="true"
+  />
+  <div
+    class="ds-c-tooltip__content ds-base"
   >
-    <TooltipIcon />
-  </button>
-  <CSSTransition
-    classNames="ds-c-tooltip"
-    in={false}
-    timeout={250}
+    Tooltip body content
+  </div>
+</div>
+`;
+
+exports[`Tooltip renders inverse tooltip 1`] = `
+<DocumentFragment>
+  <div
+    class="ds-c-tooltip__container"
   >
+    <button
+      aria-describedby="trigger_3"
+      aria-label="tooltip trigger"
+      class="ds-base ds-c-tooltip__trigger ds-c-tooltip__trigger-icon ds-c-tooltip__trigger--inverse"
+      type="button"
+    >
+      <span
+        class="ds-c-tooltip-icon__container"
+      >
+        <svg
+          aria-hidden="true"
+          aria-labelledby="icon-4__title"
+          class="ds-c-icon ds-c-icon--info-circle-thin ds-c-tooltip-icon"
+          focusable="false"
+          id="icon-4"
+          role="img"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title
+            id="icon-4__title"
+          >
+            Information
+          </title>
+          <path
+            d="M8 16c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm1-3.7V6.4H7v5.9h2zM7 4.9c0 .6.3.9 1 .9s1-.3 1-.9c0-.3-.1-.5-.2-.7-.2-.1-.5-.2-.8-.2-.3 0-.6.1-.8.2-.1.2-.2.4-.2.7z"
+            fill-rule="nonzero"
+          />
+        </svg>
+      </span>
+    </button>
     <div
-      aria-hidden={true}
-      className="ds-c-tooltip"
+      aria-hidden="true"
+      class="ds-c-tooltip ds-c-tooltip--inverse"
       data-placement="top"
-      id="trigger_1"
-      onBlur={[Function]}
+      id="trigger_3"
       role="tooltip"
-      style={
-        Object {
-          "maxWidth": "300px",
-          "zIndex": 9999,
-        }
-      }
-      tabIndex={null}
+      style="max-width: 300px; z-index: 9999;"
     >
       <span
-        className="ds-c-tooltip__arrow"
-        data-popper-arrow={true}
+        class="ds-c-tooltip__arrow"
+        data-popper-arrow="true"
       />
       <div
-        className="ds-c-tooltip__content ds-base"
+        class="ds-c-tooltip__content ds-base"
       >
         Tooltip body content
       </div>
       <span
-        className="ds-c-tooltip__interactive-border"
-        style={
-          Object {
-            "border": "15px solid transparent",
-            "left": "-15px",
-            "top": "-15px",
-            "zIndex": -999,
-          }
-        }
+        class="ds-c-tooltip__interactive-border"
+        style="left: -15px; top: -15px; border: 15px solid transparent; z-index: -999;"
       />
     </div>
-  </CSSTransition>
-</div>
+  </div>
+</DocumentFragment>
 `;
 
-exports[`Tooltip renders dialog tooltip 1`] = `
+exports[`Tooltip tooltip with close renders heading element 1`] = `
 <div
-  className="ds-c-tooltip__container"
+  aria-hidden="false"
+  class="ds-c-tooltip ds-c-tooltip-enter ds-c-tooltip-enter-active"
+  data-placement="top"
+  id="trigger_13"
+  role="dialog"
+  style="max-width: 300px; z-index: 9999;"
+  tabindex="-1"
 >
-  <button
-    className="ds-base ds-c-tooltip__trigger ds-c-tooltip__trigger-icon"
-    onClick={[Function]}
-    onTouchStart={[Function]}
-    type="button"
+  <span
+    class="ds-c-tooltip__arrow"
+    data-popper-arrow="true"
+  />
+  <div
+    class="ds-c-tooltip__content ds-base"
   >
-    <TooltipIcon />
-  </button>
-  <CSSTransition
-    classNames="ds-c-tooltip"
-    in={false}
-    timeout={250}
-  >
-    <FocusTrap
-      _createFocusTrap={[Function]}
-      active={false}
-      focusTrapOptions={
-        Object {
-          "clickOutsideDeactivates": true,
-          "initialFocus": [Function],
-        }
-      }
-      paused={false}
+    <div
+      class="ds-c-tooltip__header"
     >
-      <div
-        aria-hidden={true}
-        className="ds-c-tooltip"
-        data-placement="top"
-        id="trigger_4"
-        role="dialog"
-        style={
-          Object {
-            "maxWidth": "300px",
-            "zIndex": 9999,
-          }
-        }
-        tabIndex={-1}
-      >
-        <span
-          className="ds-c-tooltip__arrow"
-          data-popper-arrow={true}
-        />
-        <div
-          className="ds-c-tooltip__content ds-base"
-        >
-          Tooltip body content
-        </div>
-      </div>
-    </FocusTrap>
-  </CSSTransition>
+      Tooltip heading content
+    </div>
+    Tooltip body content
+  </div>
 </div>
 `;
 
-exports[`Tooltip renders inverse tooltip 1`] = `
+exports[`Tooltip tooltip with close renders heading element and close button 1`] = `
 <div
-  className="ds-c-tooltip__container"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
+  aria-hidden="false"
+  class="ds-c-tooltip ds-c-tooltip-enter ds-c-tooltip-enter-active"
+  data-placement="top"
+  id="trigger_16"
+  role="dialog"
+  style="max-width: 300px; z-index: 9999;"
+  tabindex="-1"
 >
-  <button
-    aria-describedby="trigger_2"
-    className="ds-base ds-c-tooltip__trigger ds-c-tooltip__trigger-icon ds-c-tooltip__trigger--inverse"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onTouchStart={[Function]}
-    type="button"
-  >
-    <TooltipIcon />
-  </button>
-  <CSSTransition
-    classNames="ds-c-tooltip"
-    in={false}
-    timeout={250}
+  <span
+    class="ds-c-tooltip__arrow"
+    data-popper-arrow="true"
+  />
+  <div
+    class="ds-c-tooltip__content ds-base"
   >
     <div
-      aria-hidden={true}
-      className="ds-c-tooltip ds-c-tooltip--inverse"
-      data-placement="top"
-      id="trigger_2"
-      onBlur={[Function]}
-      role="tooltip"
-      style={
-        Object {
-          "maxWidth": "300px",
-          "zIndex": 9999,
-        }
-      }
-      tabIndex={null}
+      class="ds-c-tooltip__header"
     >
-      <span
-        className="ds-c-tooltip__arrow"
-        data-popper-arrow={true}
-      />
-      <div
-        className="ds-c-tooltip__content ds-base"
+      Tooltip heading content
+      <button
+        aria-label="Close"
+        class="ds-c-button ds-c-button--transparent ds-c-button--small ds-c-tooltip__close-button"
+        type="button"
       >
-        Tooltip body content
-      </div>
-      <span
-        className="ds-c-tooltip__interactive-border"
-        style={
-          Object {
-            "border": "15px solid transparent",
-            "left": "-15px",
-            "top": "-15px",
-            "zIndex": -999,
-          }
-        }
-      />
+        <svg
+          aria-hidden="true"
+          aria-labelledby="icon-18__title"
+          class="ds-c-icon ds-c-icon--close ds-c-icon--close-thin "
+          focusable="false"
+          id="icon-18"
+          role="img"
+          viewBox="-2 -2 18 18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title
+            id="icon-18__title"
+          >
+            Close
+          </title>
+          <path
+            d="M0 13.0332964L13.0332964 0M13.0332964 13.0332964L0 0"
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="2"
+          />
+        </svg>
+      </button>
     </div>
-  </CSSTransition>
+    Tooltip body content
+  </div>
 </div>
 `;
diff --git a/packages/design-system/src/components/Drawer/usePrevious.ts b/packages/design-system/src/components/utilities/usePrevious.ts
similarity index 100%
rename from packages/design-system/src/components/Drawer/usePrevious.ts
rename to packages/design-system/src/components/utilities/usePrevious.ts
diff --git a/packages/design-system/src/styles/components/_Tooltip.scss b/packages/design-system/src/styles/components/_Tooltip.scss
index 65e9bb35d5..0dbca7fcd4 100644
--- a/packages/design-system/src/styles/components/_Tooltip.scss
+++ b/packages/design-system/src/styles/components/_Tooltip.scss
@@ -14,6 +14,8 @@ $tooltip-text-color: $color-base !default;
 $tooltip-font-size: $base-font-size !default;
 $tooltip-background-color: $color-background !default;
 
+$tooltip-close-min-width: 32px !default;
+
 %trigger-reset-styles {
   // override user agent button styles
   background: none;
@@ -117,6 +119,22 @@ $tooltip-background-color: $color-background !default;
   }
 }
 
+.ds-c-tooltip__header {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: $spacer-1;
+
+  .ds-c-tooltip__close-button {
+    // IE11 fix
+    min-width: $tooltip-close-min-width;
+  }
+}
+
+.ds-c-tooltip__header--right {
+  justify-content: flex-end;
+}
+
 // The invisible area around the tooltip container that keeps the tooltip visible on hover
 .ds-c-tooltip__interactive-border {
   height: 100%;