diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
index 77361d550..9a082dfb0 100644
--- a/.storybook/data/tokens.json
+++ b/.storybook/data/tokens.json
@@ -78,7 +78,7 @@
   "eds-l-max-width": "71.25rem",
   "eds-l-linelength-width": "36rem",
   "eds-box-shadow-sm": "0px 1px 2px 1px rgba(0, 0, 0, 0.2)",
-  "eds-box-shadow-md": "0 0.5rem 0.375rem -0.375rem rgba(0, 0, 0, 0.1)",
+  "eds-box-shadow-md": "0px 0px 0px 1px var(--eds-color-neutral-200), 0px 2px 3px rgba(0, 0, 0, 0.02), 0px 4px 8px rgba(0, 0, 0, 0.08)",
   "eds-size-1": "0.5rem",
   "eds-size-2": "1rem",
   "eds-size-3": "1.5rem",
@@ -201,5 +201,5 @@
   "eds-theme-color-form-input-border-error": "#BD0044",
   "eds-theme-form-input-border-width": "1px",
   "eds-theme-form-input-border-radius": "4px",
-  "eds-theme-box-shadow": "0 0.5rem 0.375rem -0.375rem rgba(0, 0, 0, 0.1)"
+  "eds-theme-box-shadow": "0px 0px 0px 1px var(--eds-color-neutral-200), 0px 2px 3px rgba(0, 0, 0, 0.02), 0px 4px 8px rgba(0, 0, 0, 0.08)"
 }
\ No newline at end of file
diff --git a/.stylelintrc b/.stylelintrc
index 32167bf83..78cb95ad4 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -13,6 +13,12 @@
       }
     ],
     "custom-property-empty-line-before": "never",
-    "max-nesting-depth": 1
+    "max-nesting-depth": 1,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
   }
 }
diff --git a/docs/CODE_GUIDELINES.md b/docs/CODE_GUIDELINES.md
index 7f1a2435d..ab7127e1b 100644
--- a/docs/CODE_GUIDELINES.md
+++ b/docs/CODE_GUIDELINES.md
@@ -88,7 +88,7 @@ Here's another example:
 
 ### CSS Nesting
 
-EDS uses [PostCSS Nested](https://github.com/postcss/postcss-nested) to provide some developer ergononics. As a general principle, nesting should be used sparingly and is only used in the following situations:
+EDS uses [PostCSS Nested](https://github.com/postcss/postcss-nested) to provide some developer ergonomics. As a general principle, nesting should be used sparingly and is only used in the following situations:
 
 - Media queries
 - States and pseudo-selectors
@@ -127,7 +127,7 @@ EDS uses [PostCSS Nested](https://github.com/postcss/postcss-nested) to provide
 
 #### Parent selectors
 
-Use [parent selectors](https://sass-lang.com/documentation/style-rules/parent-selector) to target a selector when it appears inside a specific parent element. Use parent selectors instead of child selectors in order to co-locate all styles around a specific selector, which improves maintability and findability.
+Use [parent selectors](https://sass-lang.com/documentation/style-rules/parent-selector) to target a selector when it appears inside a specific parent element. Use parent selectors instead of child selectors in order to co-locate all styles around a specific selector, which improves maintainability and findability.
 
 Use the following conventions:
 
@@ -188,7 +188,7 @@ For example:
 }
 ```
 
-Not all CSS declarations warrant a comment, but non-obvious declarations (like context-specific styles, magic numbers, or styles dependant on other selector styles) should be accompanied by a comment.
+Not all CSS declarations warrant a comment, but non-obvious declarations (like context-specific styles, magic numbers, or styles dependent on other selector styles) should be accompanied by a comment.
 
 ### Other CSS Rules
 
@@ -261,7 +261,7 @@ Please refer to the [design tokens documentation](./TOKENS.md) to learn how to u
 
 - **Presentational Components Only** - EDS provides a library of reusable [presentational UI components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) that are consumed by CZI applications. These presentational components are "dumb" and don't contain any application business logic and aren't hooked up to any data models.
 - **Predictable APIs** - EDS provides consistent, clear [component APIs](#component-naming) in order to provide a consistent and intuitive user developer experience.
-- **Composition over inheritence** EDS adheres to the [composition over inheritence](https://en.wikipedia.org/wiki/Composition_over_inheritance) principle in order to create clean, extensible components that aren't tied to specific contexts or content.
+- **Composition over inheritance** EDS adheres to the [composition over inheritance](https://en.wikipedia.org/wiki/Composition_over_inheritance) principle in order to create clean, extensible components that aren't tied to specific contexts or content.
 
 ## JavaScript Tools <a name="js-tools"></a>
 
@@ -320,7 +320,7 @@ export interface Props {
 }
 ```
 
-All component props must be defined with appropriate [TypeScript type](https://www.typescriptlang.org/docs/handbook/basic-types.html) applied. Each prop must contain a comment above the prop declaration to document the prop's function. These comments and prop declarations are automatically converted into prop documentation in Storybook. As a general guideline, try to organize component prop definitiones alphabetically.
+All component props must be defined with appropriate [TypeScript type](https://www.typescriptlang.org/docs/handbook/basic-types.html) applied. Each prop must contain a comment above the prop declaration to document the prop's function. These comments and prop declarations are automatically converted into prop documentation in Storybook. As a general guideline, try to organize component prop definitions alphabetically.
 
 ### Export module
 
@@ -333,7 +333,7 @@ export const ComponentName: React.FC<Props> = ({
 }) => {
 ```
 
-This defines the component name and passses in all the `Props`.
+This defines the component name and passes in all the `Props`.
 
 ### Variables, Methods, and Hooks (if applicable)
 
@@ -371,7 +371,7 @@ Components in this library exist in a flat structure so each component directory
 
 Certain components (such as `<Tabs />` and `<Table />`) require splitting up into smaller subcomponents.
 
-By default, we err towards more centralized control over the component architecture in order to prevent undesired results (for instance, we don't want users to put a `<Card />` inside of `<Breadcrumbs />`). However, certain components will require more flexibility and will therefore be architected to be composible and flexible (such as `<Card>`).
+By default, we err towards more centralized control over the component architecture in order to prevent undesired results (for instance, we don't want users to put a `<Card />` inside of `<Breadcrumbs />`). However, certain components will require more flexibility and will therefore be architected to be composable and flexible (such as `<Card>`).
 
 #### Conventions for compound components
 
@@ -391,17 +391,17 @@ By default, we err towards more centralized control over the component architect
 EDS follows specific front-end API naming conventions. Authoring a consistent API language provides many benefits:
 
 - **More efficient development** - Because the API language is consistent across components, user developers can spend more time coding rather than reading API documentation. Also, library contributors don't have to think as much about component API naming when creating new components/variants.
-- **Shared vocuabulary between designers and developers** - When the code library and design library use the same language, designers and developers can spend more time collaborating rather than futzing over what things are named. This improves team velocity and product quality. It also positions the team to benefit from future tooling that can bring design and code closer together (something many startups and plugins are trying to solve right now!)
+- **Shared vocabulary between designers and developers** - When the code library and design library use the same language, designers and developers can spend more time collaborating rather than futzing over what things are named. This improves team velocity and product quality. It also positions the team to benefit from future tooling that can bring design and code closer together (something many startups and plugins are trying to solve right now!)
 - **Future changes** - Utilizing a consistent language means that future changes and improvements are as easy as find-and-replace.
 
-EDS adhreres to the following API naming conventions:
+EDS adheres to the following API naming conventions:
 
 ### Variants
 
 - `variant` should be used for primary _stylistic_ variations of a component, such as (e.g. `<Card variant="bordered">` or `<Button variant="secondary">`). `variant` should be used if there is primarily one variable used to manipulate the component style.
 - `inverted` should be used consistently for stylistic `variation`s that "invert" the color schemes (e.g. `inverted=true`) to work on a darker background.
 - `size` should be used for adjusting size attributes (e.g. `<Button variant="secondary" size="sm">` or `<Button size="lg"`>). Default to `sm` and `lg`, with "md" being the default.
-- `behavior` should be used for funcitonal variations of a pattern, such as `<Banner behavior="dismissable">`. Additional non-exclusive behaviors should be handled using boolean props prefixed with `is` (e.g. `isSticky` and `isDismissable`).
+- `behavior` should be used for functional variations of a pattern, such as `<Banner behavior="dismissable">`. Additional non-exclusive behaviors should be handled using boolean props prefixed with `is` (e.g. `isSticky` and `isDismissable`).
 - `orientation` should be used for controlling the layout or orientation of a component (e.g. `<ButtonGroup orientation="stacked">`)
 - `align` should be used for aligning content, and should include `left` (default), `center`, `right` if needed.
 - `verticalAlign` should be used for vertically aligning content, and should include `top`, `middle`, `bottom` if needed.
@@ -410,7 +410,7 @@ EDS adhreres to the following API naming conventions:
 
 - Default to `text` for strings of text, such as `<Button text="First Name">`.
 - For headings, default to `title`, such as `<PageHeader title="My Page Title">`.
-- For form-related comnp, use the semantic `label` or `legend` (e.g. `<TextField label="first name" />`).
+- For form-related component, use the semantic `label` or `legend` (e.g. `<TextField label="first name" />`).
 
 ### Tag name
 
diff --git a/package.json b/package.json
index 19dd86190..a14027e77 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "react": ">= 16.8.0"
   },
   "dependencies": {
+    "@tippyjs/react": "4.2.5",
     "clsx": "^1.1.1",
     "downshift": "^6.1.7",
     "nanoid": "^3.3.1",
@@ -70,6 +71,8 @@
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-storyshots": "^6.4.19",
     "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
+    "@storybook/testing-react": "^1.2.3",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index a9b895aa8..da2b1d4a9 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -81,87 +81,95 @@ export interface Props {
 /**
  * Primary UI component for user interaction
  */
-export const Button: React.FC<Props> = ({
-  buttonRef,
-  className,
-  variant,
-  size,
-  disabled,
-  fullWidth,
-  iconName,
-  iconPosition = 'before',
-  inverted,
-  loading,
-  onClick,
-  screenReaderText,
-  href,
-  text,
-  type,
-  hideText,
-  ...other
-}) => {
-  const componentClassName = clsx(styles['button'], className, {
-    [styles['button--primary']]: variant === 'primary',
-    [styles['button--bare']]: variant === 'bare',
-    [styles['button--link']]: variant === 'link',
-    [styles['button--sm']]: size === 'sm',
-    [styles['button--table-header']]: variant === 'table-header',
-    [styles['button--inverted']]: inverted === true,
-    [styles['button--full-width']]: fullWidth,
-    [styles['eds-is-loading']]: loading,
-  });
-  const TagName = href ? 'a' : 'button';
+export const Button = React.forwardRef(
+  (
+    {
+      buttonRef,
+      className,
+      variant,
+      size,
+      disabled,
+      fullWidth,
+      iconName,
+      iconPosition = 'before',
+      inverted,
+      loading,
+      onClick,
+      screenReaderText,
+      href,
+      text,
+      type,
+      hideText,
+      ...other
+    }: Props,
+    ref,
+  ) => {
+    const componentClassName = clsx(styles['button'], className, {
+      [styles['button--primary']]: variant === 'primary',
+      [styles['button--bare']]: variant === 'bare',
+      [styles['button--link']]: variant === 'link',
+      [styles['button--sm']]: size === 'sm',
+      [styles['button--table-header']]: variant === 'table-header',
+      [styles['button--inverted']]: inverted === true,
+      [styles['button--full-width']]: fullWidth,
+      [styles['eds-is-loading']]: loading,
+    });
+    const TagName = href ? 'a' : 'button';
 
-  const computedIcon = (
-    <>
-      {loading && (
-        <Icon
-          aria-hidden="true"
-          focusable={false}
-          name="spinner"
-          className={styles['button__icon']}
-        />
-      )}
-      {!loading && iconName && (
-        <Icon
-          aria-hidden="true"
-          focusable={false}
-          name={iconName}
-          className={styles['button__icon']}
-        />
-      )}
-    </>
-  );
+    const computedIcon = (
+      <>
+        {loading && (
+          <Icon
+            aria-hidden="true"
+            focusable={false}
+            name="spinner"
+            className={styles['button__icon']}
+          />
+        )}
+        {!loading && iconName && (
+          <Icon
+            aria-hidden="true"
+            focusable={false}
+            name={iconName}
+            className={styles['button__icon']}
+          />
+        )}
+      </>
+    );
 
-  return (
-    <TagName
-      className={componentClassName}
-      href={href}
-      disabled={disabled}
-      tabIndex={disabled ? -1 : undefined}
-      ref={buttonRef}
-      type={type}
-      onClick={onClick}
-      {...other}
-    >
-      {iconPosition === 'before' && computedIcon}
+    return (
+      <TagName
+        className={componentClassName}
+        href={href}
+        disabled={disabled}
+        tabIndex={disabled ? -1 : undefined}
+        ref={buttonRef || ref}
+        type={type}
+        onClick={onClick}
+        {...other}
+      >
+        {iconPosition === 'before' && computedIcon}
 
-      {text && (
-        <span
-          className={
-            !hideText
-              ? styles['button__text']
-              : styles['button__text'] + 'u-is-vishidden'
-          }
-        >
-          {text}
-          {screenReaderText && (
-            <span className={styles['u-is-vishidden']}>{screenReaderText}</span>
-          )}
-        </span>
-      )}
+        {text && (
+          <span
+            className={
+              !hideText
+                ? styles['button__text']
+                : styles['button__text'] + 'u-is-vishidden'
+            }
+          >
+            {text}
+            {screenReaderText && (
+              <span className={styles['u-is-vishidden']}>
+                {screenReaderText}
+              </span>
+            )}
+          </span>
+        )}
 
-      {iconPosition === 'after' && computedIcon}
-    </TagName>
-  );
-};
+        {iconPosition === 'after' && computedIcon}
+      </TagName>
+    );
+  },
+);
+Button.displayName = 'Button';
diff --git a/src/components/Counter/Counter.stories.tsx b/src/components/Counter/Counter.stories.tsx
index 0867e1f8e..b609327a8 100644
--- a/src/components/Counter/Counter.stories.tsx
+++ b/src/components/Counter/Counter.stories.tsx
@@ -1,6 +1,7 @@
 import { Story, Meta } from '@storybook/react';
 import React from 'react';
 import { Counter, Props } from './Counter';
+import { Button } from '../Button/Button';
 import { Tooltip } from '../Tooltip/Tooltip';
 
 export default {
@@ -30,8 +31,13 @@ DefaultWithTooltip.args = {
   plusButtonText: 'Add by 1',
   fieldNote: 'This is a counter field',
   labelAfter: (
-    <Tooltip buttonText="Select this button to trigger the tooltip">
-      Some text to help with a form field
+    <Tooltip text="Some text to help with a form field">
+      <Button
+        variant="bare"
+        iconPosition="after"
+        iconName="question-mark-circle"
+        text="Hover this button to trigger the tooltip"
+      />
     </Tooltip>
   ),
 };
diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css
old mode 100755
new mode 100644
index 2236eacbe..f51a157da
--- a/src/components/Tooltip/Tooltip.module.css
+++ b/src/components/Tooltip/Tooltip.module.css
@@ -1,72 +1,124 @@
-@import '../../design-tokens/mixins.css';
-
 /*------------------------------------*\
     #TOOLTIP
 \*------------------------------------*/
 
 /**
- * 1) An icon that appears 
+ * 1) Tippyjs provides .tippy-box, which has two child elements: .tippy-content and .tippy-arrow
+ * 2) Tippyjs also attaches data-attribute `data-placement` depending on how the tooltip is aligned
  */
+
 .tooltip {
-  display: inline-block;
-  position: relative;
-  overflow: visible;
+  border-style: solid;
+  border-width: var(--eds-border-width-sm);
+  border-radius: var(--eds-border-radius-lg);
+  box-shadow: var(--eds-theme-box-shadow);
+  
+  @media (prefers-reduced-motion) {
+    transition-property: none;
+  }
 }
 
-.tooltip__trigger {
-  display: inline-block;
-  cursor: pointer;
+/**
+ * 1) Enables opacity fade animation 
+ */
+.tooltip[data-state="hidden"] {
+  opacity: 0;
+}
 
-  &:focus-visible {
-    @mixin focus;
-  }
+.tooltip :global(.tippy-content) {
+  padding-left: var(--eds-size-2);
+  padding-right: var(--eds-size-2);
+  padding-bottom: var(--eds-size-1);
+  padding-top: var(--eds-size-1);
+}
+
+/**
+ * 1) Color Variants
+ */
+.tooltip--light {
+  border-color: var(--eds-color-neutral-300);
+  color: var(--eds-color-neutral-700);
+  background-color: var(--eds-color-neutral-100);
+  --arrow-color: var(--eds-color-neutral-300);
+}
+
+.tooltip--dark {
+  border-color: var(--eds-color-neutral-700);
+  color: var(--eds-color-neutral-white);
+  background-color: var(--eds-color-neutral-700);
+  --arrow-color: var(--eds-color-neutral-700);
 }
 
-.tooltip__content {
-  display: none;
+/**
+ * 1) Add arrows
+ */
+.tooltip :global(.tippy-arrow) {
   position: absolute;
-  bottom: 130%;
-  left: 50%;
-  margin-left: -96px;
-  width: 12rem;
-  padding: var(--eds-size-1);
-  background: var(--eds-color-neutral-white);
-  color: var(--eds-theme-color-body-foreground);
-  border-width: var(--eds-theme-border-width);
+
+  width: var(--eds-size-2);
+  height: var(--eds-size-2);
+}
+
+.tooltip :global(.tippy-arrow::before) {
+  position: absolute;
+
   border-style: solid;
-  border-color: var(--eds-theme-color-neutral-subtle-border);
-  border-radius: var(--eds-theme-border-radius);
-  box-shadow: var(--eds-theme-box-shadow);
+  border-color: transparent;
+  border-width: var(--eds-size-1);
 
-  &:focus-visible {
-    @mixin focus;
-  }
+  content: "";
+}
 
-  .tooltip--right & {
-    bottom: auto;
-    top: -50%;
-    left: 130%;
-    margin-left: 0;
-  }
+.tooltip[data-placement^="top"] :global(.tippy-arrow) {
+  left: 0;
 
-  .tooltip--below & {
-    bottom: inherit;
-  }
+  transform: translate3d(73px, 0, 0);
+}
 
-  .tooltip--left & {
-    bottom: auto;
-    left: auto;
-    top: -50%;
-    right: calc(130% + 5px);
-  }
+.tooltip[data-placement^="bottom"] :global(.tippy-arrow) {
+  top: 0;
+  left: 0;
 
-  .tooltip.eds-is-active & {
-    display: flex;
-    justify-content: center;
-    z-index: var(--eds-z-index-100);
-  }
+  transform: translate3d(73px, 0, 0);
+}
+
+.tooltip[data-placement^="left"] :global(.tippy-arrow) {
+  top: 0;
+  right: 0;
+
+  transform: translate3d(0, 19px, 0);
+}
+
+.tooltip[data-placement^="right"] :global(.tippy-arrow) {
+  top: 0;
+  left: 0;
+
+  transform: translate3d(0, 25px, 0);
+}
+
+.tooltip[data-placement^="top"] :global(.tippy-arrow::before) {
+  left: 0;
+
+  border-top-color: var(--arrow-color);
+  border-bottom-width: 0;
+}
+
+.tooltip[data-placement^="bottom"] :global(.tippy-arrow::before) {
+  left: 0;
+
+  border-bottom-color: var(--arrow-color);
+  border-top-width: 0;
+  top: -7px;
+}
+
+.tooltip[data-placement^="left"] :global(.tippy-arrow::before) {
+  border-left-color: var(--arrow-color);
+  border-right-width: 0;
+  right: -7px;
 }
 
-.tooltip__icon {
-  fill: var(--eds-theme-color-primary-foreground);
+.tooltip[data-placement^="right"] :global(.tippy-arrow::before) {
+  border-right-color: var(--arrow-color);
+  border-left-width: 0;
+  left: -7px;
 }
diff --git a/src/components/Tooltip/Tooltip.stories.module.css b/src/components/Tooltip/Tooltip.stories.module.css
new file mode 100644
index 000000000..b66b9ae21
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.stories.module.css
@@ -0,0 +1,29 @@
+/*------------------------------------*\
+    #TOOLTIP STORIES
+\*------------------------------------*/
+
+/**
+ * 1) Spacing is required for the Tooltip to be placed where alignment is indicated,
+ * otherwise Tippy will place somewhere else due to lack of space
+ */
+
+.trigger--spacing {
+  margin: 9rem; /* 1 */
+}
+
+.trigger--spacing-top {
+  margin-top: 9rem;
+}
+.trigger--spacing-bottom {
+  margin-bottom: 9rem;
+}
+.trigger--spacing-left {
+  margin-left: 9rem;
+}
+.trigger--spacing-right {
+  margin-right: 9rem;
+}
+
+.trigger--spacing-left-large {
+  margin-left: 24rem;
+}
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index 09e7881c7..a1d7f2bd8 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,41 +1,147 @@
-import { Story, Meta } from '@storybook/react';
+import type { Meta, Story, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+import clsx from 'clsx';
 import React from 'react';
+import Tooltip from './Tooltip';
+import styles from './Tooltip.stories.module.css';
+import { Button } from '../Button/Button';
 
-import { Tooltip, Props } from './Tooltip';
-import { TextPassage } from '../TextPassage/TextPassage';
+const defaultArgs = {
+  text: (
+    <span data-testid="tooltip-content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
+      <b>Donec a erat eu augue consequat eleifend non vel sem.</b> Praesent
+      efficitur mauris ac leo semper accumsan.
+    </span>
+  ),
+  children: (
+    <Button
+      className={clsx(styles['trigger--spacing'])}
+      text="Tooltip trigger"
+    />
+  ),
+  align: 'right',
+  visible: true,
+};
 
 export default {
   title: 'Molecules/Messaging/Tooltip',
   component: Tooltip,
-} as Meta;
-
-const Template: Story<Props> = (args) => (
-  <div style={{ margin: '10rem' }}>
-    <Tooltip {...args}>
-      <TextPassage>
-        <p>Hello, I am a tooltip</p>
-      </TextPassage>
-    </Tooltip>
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = { buttonText: 'Click on this to get more information' };
-
-export const Right = Template.bind({});
-Right.args = {
-  align: 'right',
-  buttonText: 'Click on this to get more information',
+  args: defaultArgs,
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof Tooltip>;
+
+export const LightVariant: StoryObj<Args> = {};
+
+export const DarkVariant: StoryObj<Args> = {
+  args: {
+    variant: 'dark',
+  },
+};
+
+export const LeftPlacement: StoryObj<Args> = {
+  args: {
+    align: 'left',
+    children: (
+      <Button
+        className={clsx(
+          styles['trigger--spacing-top'],
+          styles['trigger--spacing-bottom'],
+          styles['trigger--spacing-left-large'],
+        )}
+        text="Tooltip trigger"
+      />
+    ),
+  },
+};
+
+export const TopPlacement: StoryObj<Args> = {
+  args: {
+    align: 'top',
+    children: (
+      <Button
+        className={clsx(
+          styles['trigger--spacing-top'],
+          styles['trigger--spacing-left'],
+        )}
+        text="Tooltip trigger"
+      />
+    ),
+  },
+};
+
+export const BottomPlacement: StoryObj<Args> = {
+  args: {
+    align: 'bottom',
+    children: (
+      <Button
+        className={clsx(
+          styles['trigger--spacing-bottom'],
+          styles['trigger--spacing-left'],
+        )}
+        text="Tooltip trigger"
+      />
+    ),
+  },
+};
+
+export const LongText: StoryObj<Args> = {
+  args: {
+    text: (
+      <span>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
+        <b>Donec a erat eu augue consequat eleifend non vel sem.</b> Praesent
+        efficitur mauris ac leo semper accumsan. Donec posuere semper fermentum.
+        Vivamus venenatis laoreet venenatis. Sed consectetur, dolor sed
+        tristique vehicula, sapien nulla convallis odio, et tempus urna mi eu
+        leo. Phasellus a venenatis sapien. Cras massa lectus, sollicitudin id
+        nulla id, laoreet facilisis est.
+      </span>
+    ),
+  },
 };
 
-export const Below = Template.bind({});
-Below.args = {
-  align: 'below',
-  buttonText: 'Click on this to get more information',
+export const LongButtonText: StoryObj<Args> = {
+  args: {
+    children: (
+      <Button
+        className={clsx(styles['trigger--spacing-top'])}
+        text="Tooltip trigger with longer text to test placement"
+      />
+    ),
+  },
 };
 
-export const Left = Template.bind({});
-Left.args = {
-  align: 'left',
-  buttonText: 'Click on this to get more information',
+export const Interactive: StoryObj<Args> = {
+  args: {
+    visible: undefined,
+    children: (
+      <Button
+        className={clsx(styles['trigger--spacing'])}
+        text="Hover here to see tooltip after clicking somewhere outside."
+      />
+    ),
+  },
+  decorators: [
+    (Story: Story) => (
+      <div>
+        <p>
+          Click somewhere in this area to dismiss the tooltip, then hover over
+          the button to make it reappear.
+        </p>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = await canvas.findByRole('button');
+    await userEvent.hover(trigger);
+  },
 };
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
new file mode 100644
index 000000000..5d7aa6e4d
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -0,0 +1,28 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import { userEvent } from '@storybook/testing-library';
+import { composeStories } from '@storybook/testing-react';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import * as TooltipStoryFile from './Tooltip.stories';
+
+const { Interactive } = composeStories(TooltipStoryFile);
+
+describe('<Tooltip />', () => {
+  generateSnapshots(TooltipStoryFile, {
+    // Tippy renders tooltip as a child of <body> and hence is why baseElement needs to be targetted
+    getElement: (wrapper) => {
+      return wrapper.baseElement;
+    },
+  });
+
+  it('should close tooltip via escape key', async () => {
+    // Test fails if animation is enabled https://github.com/atomiks/tippyjs-react/blob/master/test/Tippy.test.js#L65
+    render(<Interactive animation={false} />);
+    const trigger = await screen.findByRole('button');
+    expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument();
+    await userEvent.hover(trigger);
+    expect(screen.getByTestId('tooltip-content')).toBeInTheDocument();
+    await userEvent.keyboard('{esc}');
+    expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 7053dfac9..804d38452 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -1,140 +1,123 @@
+import Tippy from '@tippyjs/react';
 import clsx from 'clsx';
-import React, {
-  ReactNode,
-  useState,
-  useRef,
-  useEffect,
-  MutableRefObject,
-} from 'react';
+import * as React from 'react';
 import styles from './Tooltip.module.css';
-import { ESCAPE_KEYCODE, TAB_KEYCODE } from '../../util/keycodes';
-import { Button } from '../Button/Button';
 
-export interface Props {
+// Full list of Tippy props: https://atomiks.github.io/tippyjs/v6/all-props/
+type TooltipProps = {
   /**
-   * Alignment variations
-   * - **right** yields a tooltip that appears to the right of the trigger
-   * - **below** yields a tooltip that appears below the trigger
-   * - **left** yields a tooltip that appears to the left of the trigger
+   * Where the tooltip should be placed in relation to the element it's attached to.
+   *
+   * Tippy also supports 'top-start', 'top-end', 'right-start', 'right-end', etc,
+   * but our CSS currently only supports the 4 main sides.
    */
-  align?: 'right' | 'below' | 'left';
+  align?: 'top' | 'right' | 'bottom' | 'left';
   /**
-   * The visually-hidden button text for the tooltip trigger button
+   * Behavior of the tooltip transition, defaults to an opacity "fade".
+   * Animation guidelines are provided in https://atomiks.github.io/tippyjs/v5/animations/.
+   * A false value will disable animations.
    */
-  buttonText?: string;
+  animation?: string | boolean;
   /**
-   * Child node(s) that can be nested inside component. This gets displayed inside a `TextPassage` inside the tooltip
+   * The trigger element the tooltip appears next to.
    */
-  children?: ReactNode;
+  children?: React.ReactElement;
   /**
-   * CSS class names that can be appended to the component.
+   * Custom classname for additional styles.
+   *
+   * These styles will only affect the tooltip bubble.
    */
   className?: string;
   /**
-   * HTML id for the component
+   * How long to delay the Tooltip showing and hiding, in milliseconds.
+   *
+   * If a single number is provided, it will be applied to showing and hiding.
+   * If an array with 2 numbers is provided, the first will apply to showing and
+   * the second will be applied to hiding.
+   * https://atomiks.github.io/tippyjs/v6/all-props/#delay
    */
-  id?: string;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Tooltip: React.FC<Props> = ({
-  className,
-  children,
-  align,
-  buttonText,
-  ...other
-}) => {
+  delay?: number | [number | null, number | null];
   /**
-   * Initialize variables and states
+   * The trigger element the tooltip appears next to.
+   *
+   * Use this instead of `children` if the trigger element is being
+   * stored in a ref. Most cases will use `children` and not
+   * `reference`.
    */
-  const ref = useRef() as MutableRefObject<HTMLDivElement>;
-  const buttonRef = useRef() as MutableRefObject<HTMLButtonElement>;
-
-  const [isActive, setIsActive] = useState(false);
-
+  reference?: React.RefObject<Element> | Element;
+  /**
+   * The content of the tooltip bubble.
+   */
+  text?: React.ReactNode;
+  /**
+   * Whether the tooltip has a light or dark background.
+   */
+  variant?: 'light' | 'dark';
   /**
-   * Toggle isActive state on click
+   * Whether the tooltip is always visible or always invisible.
+   *
+   * This is most often left undefined so the Tooltip component
+   * controls if/when the bubble appears (on hover, click, focus, etc).
    */
-  function onClick(e: any) {
-    e.preventDefault();
-    setIsActive(!isActive);
-  }
+  visible?: boolean;
+};
 
-  useEffect(() => {
-    if (isActive) {
-      ref.current.focus();
-    }
-    document.addEventListener('mousedown', handleOnClickOutside, false);
-    document.addEventListener('touchstart', handleOnClickOutside, false);
-    return () => {
-      document.removeEventListener('mousedown', handleOnClickOutside, false);
-      document.removeEventListener('touchstart', handleOnClickOutside, false);
-    };
-  });
+// @tippyjs/react does not expose tippy.js types, have to extract via props and grab element type from array type
+type Plugins = NonNullable<React.ComponentProps<typeof Tippy>['plugins']>;
+type Plugin = Plugins[number];
 
-  const handleOnClickOutside = (event: MouseEvent | TouchEvent) => {
-    if (
-      ref.current &&
-      !ref.current.contains(event.target as HTMLElement) &&
-      buttonRef.current &&
-      !buttonRef.current.contains(event.target as HTMLElement)
-    ) {
-      setIsActive(false);
-      setTimeout(() => {
-        if (isActive) {
-          buttonRef.current.focus();
+/**
+ * ```ts
+ * import {Tooltip} from "@chanzuckerberg/eds-components";
+ * ```
+ *
+ * A styled tooltip built on Tippy.js.
+ *
+ * https://atomiks.github.io/tippyjs/
+ * https://github.com/atomiks/tippyjs-react
+ */
+export const Tooltip = ({
+  variant = 'light',
+  align = 'top',
+  className,
+  text,
+  ...rest
+}: TooltipProps) => {
+  // Hides tooltip when escape key is pressed, following:
+  // https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc
+  const hideOnEsc: Plugin = {
+    name: 'hideOnEsc',
+    defaultValue: true,
+    fn: ({ hide }) => {
+      function onKeyDown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+          hide();
         }
-      }, 1);
-    }
+      }
+      return {
+        onShow() {
+          document.addEventListener('keydown', onKeyDown);
+        },
+        onHide() {
+          document.removeEventListener('keydown', onKeyDown);
+        },
+      };
+    },
   };
-
-  /**
-   * Handle Keydown
-   * 1) Remove isActive state and focus on the tooltip button
-   */
-  function onKeyDown(e: any) {
-    if (e.code === ESCAPE_KEYCODE || e.code === TAB_KEYCODE) {
-      setIsActive(false);
-      setTimeout(() => {
-        if (isActive) {
-          buttonRef.current.focus();
-        }
-      }, 1);
-    }
-  }
-  const componentClassName = clsx(styles['tooltip'], className, {
-    [styles['eds-is-active']]: isActive,
-    [styles['tooltip--right']]: align === 'right',
-    [styles['tooltip--below']]: align === 'below',
-    [styles['tooltip--left']]: align === 'left',
-  });
-
   return (
-    <div className={componentClassName} {...other}>
-      <span className={styles['tooltip__trigger']}>
-        <Button
-          variant="bare"
-          hideText
-          iconPosition="after"
-          iconName="question-mark-circle"
-          aria-label={buttonText}
-          text={buttonText}
-          type="button"
-          onClick={onClick}
-          buttonRef={buttonRef}
-        />
-      </span>
-      <span
-        ref={ref}
-        className={styles['tooltip__content']}
-        aria-hidden={!isActive}
-        tabIndex={isActive ? 0 : -1}
-        onKeyDown={onKeyDown}
-      >
-        {children}
-      </span>
-    </div>
+    <Tippy
+      {...rest}
+      className={clsx(
+        styles['tooltip'],
+        className,
+        variant === 'light' && styles['tooltip--light'],
+        variant === 'dark' && styles['tooltip--dark'],
+      )}
+      content={text}
+      duration={200}
+      placement={align}
+      plugins={[hideOnEsc]}
+    />
   );
 };
+export default Tooltip;
diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
new file mode 100644
index 000000000..08c0cd550
--- /dev/null
+++ b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -0,0 +1,460 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Tooltip /> BottomPlacement story renders snapshot 1`] = `
+<body>
+  <div>
+    <button
+      aria-describedby="tippy-5"
+      class="button trigger--spacing-bottom trigger--spacing-left"
+    >
+      <span
+        class="button__text"
+      >
+        Tooltip trigger
+      </span>
+    </button>
+  </div>
+  <div
+    data-tippy-root=""
+    id="tippy-5"
+    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(0px, 10px);"
+  >
+    <div
+      class="tippy-box tooltip tooltip--light"
+      data-animation="fade"
+      data-escaped=""
+      data-placement="bottom"
+      data-reference-hidden=""
+      data-state="visible"
+      role="tooltip"
+      style="max-width: 350px; transition-duration: 200ms;"
+      tabindex="-1"
+    >
+      <div
+        class="tippy-content"
+        data-state="visible"
+        style="transition-duration: 200ms;"
+      >
+        <div>
+          <span
+            data-testid="tooltip-content"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             
+            <b>
+              Donec a erat eu augue consequat eleifend non vel sem.
+            </b>
+             Praesent efficitur mauris ac leo semper accumsan.
+          </span>
+        </div>
+      </div>
+      <div
+        class="tippy-arrow"
+        style="position: absolute; left: 0px; transform: translate(3px, 0px);"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Tooltip /> DarkVariant story renders snapshot 1`] = `
+<body>
+  <div>
+    <button
+      aria-describedby="tippy-2"
+      class="button trigger--spacing"
+    >
+      <span
+        class="button__text"
+      >
+        Tooltip trigger
+      </span>
+    </button>
+  </div>
+  <div
+    data-tippy-root=""
+    id="tippy-2"
+    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
+  >
+    <div
+      class="tippy-box tooltip tooltip--dark"
+      data-animation="fade"
+      data-escaped=""
+      data-placement="right"
+      data-reference-hidden=""
+      data-state="visible"
+      role="tooltip"
+      style="max-width: 350px; transition-duration: 200ms;"
+      tabindex="-1"
+    >
+      <div
+        class="tippy-content"
+        data-state="visible"
+        style="transition-duration: 200ms;"
+      >
+        <div>
+          <span
+            data-testid="tooltip-content"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             
+            <b>
+              Donec a erat eu augue consequat eleifend non vel sem.
+            </b>
+             Praesent efficitur mauris ac leo semper accumsan.
+          </span>
+        </div>
+      </div>
+      <div
+        class="tippy-arrow"
+        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Tooltip /> Interactive story renders snapshot 1`] = `
+<body>
+  <div>
+    <div>
+      <p>
+        Click somewhere in this area to dismiss the tooltip, then hover over the button to make it reappear.
+      </p>
+      <button
+        aria-describedby="tippy-8"
+        class="button trigger--spacing"
+      >
+        <span
+          class="button__text"
+        >
+          Hover here to see tooltip after clicking somewhere outside.
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    data-tippy-root=""
+    id="tippy-8"
+    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
+  >
+    <div
+      class="tippy-box tooltip tooltip--light"
+      data-animation="fade"
+      data-escaped=""
+      data-placement="right"
+      data-reference-hidden=""
+      data-state="visible"
+      role="tooltip"
+      style="max-width: 350px; transition-duration: 200ms;"
+      tabindex="-1"
+    >
+      <div
+        class="tippy-content"
+        data-state="visible"
+        style="transition-duration: 200ms;"
+      >
+        <div>
+          <span
+            data-testid="tooltip-content"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             
+            <b>
+              Donec a erat eu augue consequat eleifend non vel sem.
+            </b>
+             Praesent efficitur mauris ac leo semper accumsan.
+          </span>
+        </div>
+      </div>
+      <div
+        class="tippy-arrow"
+        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Tooltip /> LeftPlacement story renders snapshot 1`] = `
+<body>
+  <div>
+    <button
+      aria-describedby="tippy-3"
+      class="button trigger--spacing-top trigger--spacing-bottom trigger--spacing-left-large"
+    >
+      <span
+        class="button__text"
+      >
+        Tooltip trigger
+      </span>
+    </button>
+  </div>
+  <div
+    data-tippy-root=""
+    id="tippy-3"
+    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-10px, 0px);"
+  >
+    <div
+      class="tippy-box tooltip tooltip--light"
+      data-animation="fade"
+      data-escaped=""
+      data-placement="left"
+      data-reference-hidden=""
+      data-state="visible"
+      role="tooltip"
+      style="max-width: 350px; transition-duration: 200ms;"
+      tabindex="-1"
+    >
+      <div
+        class="tippy-content"
+        data-state="visible"
+        style="transition-duration: 200ms;"
+      >
+        <div>
+          <span
+            data-testid="tooltip-content"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             
+            <b>
+              Donec a erat eu augue consequat eleifend non vel sem.
+            </b>
+             Praesent efficitur mauris ac leo semper accumsan.
+          </span>
+        </div>
+      </div>
+      <div
+        class="tippy-arrow"
+        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Tooltip /> LightVariant story renders snapshot 1`] = `
+<body>
+  <div>
+    <button
+      aria-describedby="tippy-1"
+      class="button trigger--spacing"
+    >
+      <span
+        class="button__text"
+      >
+        Tooltip trigger
+      </span>
+    </button>
+  </div>
+  <div
+    data-tippy-root=""
+    id="tippy-1"
+    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
+  >
+    <div
+      class="tippy-box tooltip tooltip--light"
+      data-animation="fade"
+      data-escaped=""
+      data-placement="right"
+      data-reference-hidden=""
+      data-state="visible"
+      role="tooltip"
+      style="max-width: 350px; transition-duration: 200ms;"
+      tabindex="-1"
+    >
+      <div
+        class="tippy-content"
+        data-state="visible"
+        style="transition-duration: 200ms;"
+      >
+        <div>
+          <span
+            data-testid="tooltip-content"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             
+            <b>
+              Donec a erat eu augue consequat eleifend non vel sem.
+            </b>
+             Praesent efficitur mauris ac leo semper accumsan.
+          </span>
+        </div>
+      </div>
+      <div
+        class="tippy-arrow"
+        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Tooltip /> LongButtonText story renders snapshot 1`] = `
+<body>
+  <div>
+    <button
+      aria-describedby="tippy-7"
+      class="button trigger--spacing-top"
+    >
+      <span
+        class="button__text"
+      >
+        Tooltip trigger with longer text to test placement
+      </span>
+    </button>
+  </div>
+  <div
+    data-tippy-root=""
+    id="tippy-7"
+    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
+  >
+    <div
+      class="tippy-box tooltip tooltip--light"
+      data-animation="fade"
+      data-escaped=""
+      data-placement="right"
+      data-reference-hidden=""
+      data-state="visible"
+      role="tooltip"
+      style="max-width: 350px; transition-duration: 200ms;"
+      tabindex="-1"
+    >
+      <div
+        class="tippy-content"
+        data-state="visible"
+        style="transition-duration: 200ms;"
+      >
+        <div>
+          <span
+            data-testid="tooltip-content"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             
+            <b>
+              Donec a erat eu augue consequat eleifend non vel sem.
+            </b>
+             Praesent efficitur mauris ac leo semper accumsan.
+          </span>
+        </div>
+      </div>
+      <div
+        class="tippy-arrow"
+        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Tooltip /> LongText story renders snapshot 1`] = `
+<body>
+  <div>
+    <button
+      aria-describedby="tippy-6"
+      class="button trigger--spacing"
+    >
+      <span
+        class="button__text"
+      >
+        Tooltip trigger
+      </span>
+    </button>
+  </div>
+  <div
+    data-tippy-root=""
+    id="tippy-6"
+    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
+  >
+    <div
+      class="tippy-box tooltip tooltip--light"
+      data-animation="fade"
+      data-escaped=""
+      data-placement="right"
+      data-reference-hidden=""
+      data-state="visible"
+      role="tooltip"
+      style="max-width: 350px; transition-duration: 200ms;"
+      tabindex="-1"
+    >
+      <div
+        class="tippy-content"
+        data-state="visible"
+        style="transition-duration: 200ms;"
+      >
+        <div>
+          <span>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             
+            <b>
+              Donec a erat eu augue consequat eleifend non vel sem.
+            </b>
+             Praesent efficitur mauris ac leo semper accumsan. Donec posuere semper fermentum. Vivamus venenatis laoreet venenatis. Sed consectetur, dolor sed tristique vehicula, sapien nulla convallis odio, et tempus urna mi eu leo. Phasellus a venenatis sapien. Cras massa lectus, sollicitudin id nulla id, laoreet facilisis est.
+          </span>
+        </div>
+      </div>
+      <div
+        class="tippy-arrow"
+        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Tooltip /> TopPlacement story renders snapshot 1`] = `
+<body>
+  <div>
+    <button
+      aria-describedby="tippy-4"
+      class="button trigger--spacing-top trigger--spacing-left"
+    >
+      <span
+        class="button__text"
+      >
+        Tooltip trigger
+      </span>
+    </button>
+  </div>
+  <div
+    data-tippy-root=""
+    id="tippy-4"
+    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; bottom: 0px; transform: translate(0px, -10px);"
+  >
+    <div
+      class="tippy-box tooltip tooltip--light"
+      data-animation="fade"
+      data-escaped=""
+      data-placement="top"
+      data-reference-hidden=""
+      data-state="visible"
+      role="tooltip"
+      style="max-width: 350px; transition-duration: 200ms;"
+      tabindex="-1"
+    >
+      <div
+        class="tippy-content"
+        data-state="visible"
+        style="transition-duration: 200ms;"
+      >
+        <div>
+          <span
+            data-testid="tooltip-content"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             
+            <b>
+              Donec a erat eu augue consequat eleifend non vel sem.
+            </b>
+             Praesent efficitur mauris ac leo semper accumsan.
+          </span>
+        </div>
+      </div>
+      <div
+        class="tippy-arrow"
+        style="position: absolute; left: 0px; transform: translate(3px, 0px);"
+      />
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
new file mode 100644
index 000000000..cdc0fab16
--- /dev/null
+++ b/src/components/Tooltip/index.ts
@@ -0,0 +1 @@
+export { default } from './Tooltip';
diff --git a/src/design-tokens/tier-1-definitions/shadows.json b/src/design-tokens/tier-1-definitions/shadows.json
index 4ee585422..bddfa8c2e 100644
--- a/src/design-tokens/tier-1-definitions/shadows.json
+++ b/src/design-tokens/tier-1-definitions/shadows.json
@@ -5,7 +5,7 @@
         "value": "0px 1px 2px 1px rgba(0, 0, 0, 0.2)"
       },
       "md": {
-        "value": "0 0.5rem 0.375rem -0.375rem rgba(0, 0, 0, 0.1)"
+        "value": "0px 0px 0px 1px var(--eds-color-neutral-200), 0px 2px 3px rgba(0, 0, 0, 0.02), 0px 4px 8px rgba(0, 0, 0, 0.08)"
       }
     }
   }
diff --git a/yarn.lock b/yarn.lock
index 4781bb652..f14b8ab1f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1610,9 +1610,12 @@ __metadata:
     "@storybook/addon-postcss": ^2.0.0
     "@storybook/addon-storyshots": ^6.4.19
     "@storybook/react": ^6.4.19
+    "@storybook/testing-library": ^0.0.9
+    "@storybook/testing-react": ^1.2.3
     "@testing-library/jest-dom": ^5.16.2
     "@testing-library/react": ^12.1.3
     "@testing-library/user-event": ^13.5.0
+    "@tippyjs/react": 4.2.5
     "@types/estree": ^0.0.51
     "@types/jest": ^27.4.1
     "@types/node": ^17.0.21
@@ -2615,7 +2618,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.5.4, @popperjs/core@npm:^2.6.0":
+"@popperjs/core@npm:^2.5.4, @popperjs/core@npm:^2.6.0, @popperjs/core@npm:^2.9.0":
   version: 2.11.2
   resolution: "@popperjs/core@npm:2.11.2"
   checksum: 5695bf020eda54636e16a62dc9b5fdd92beaf7b2d19f62fcef049d57c5cff92773562d80cbf760b217c3ec928da310eb24994ab6a00fd39dffa0af9b5dfc01a6
@@ -3179,6 +3182,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addons@npm:6.5.0-alpha.46":
+  version: 6.5.0-alpha.46
+  resolution: "@storybook/addons@npm:6.5.0-alpha.46"
+  dependencies:
+    "@storybook/api": 6.5.0-alpha.46
+    "@storybook/channels": 6.5.0-alpha.46
+    "@storybook/client-logger": 6.5.0-alpha.46
+    "@storybook/core-events": 6.5.0-alpha.46
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/router": 6.5.0-alpha.46
+    "@storybook/theming": 6.5.0-alpha.46
+    "@types/webpack-env": ^1.16.0
+    core-js: ^3.8.2
+    global: ^4.4.0
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: a9b28e644a2a13706763678e26e3b33d1bbeb02a60d3c57d3674a98e716ad2bcf3d86760b6f629341ce2e26031873d912799a7c44396a6cf0ecbed981c389757
+  languageName: node
+  linkType: hard
+
 "@storybook/api@npm:6.4.19":
   version: 6.4.19
   resolution: "@storybook/api@npm:6.4.19"
@@ -3207,6 +3232,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/api@npm:6.5.0-alpha.46":
+  version: 6.5.0-alpha.46
+  resolution: "@storybook/api@npm:6.5.0-alpha.46"
+  dependencies:
+    "@storybook/channels": 6.5.0-alpha.46
+    "@storybook/client-logger": 6.5.0-alpha.46
+    "@storybook/core-events": 6.5.0-alpha.46
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/router": 6.5.0-alpha.46
+    "@storybook/semver": ^7.3.2
+    "@storybook/theming": 6.5.0-alpha.46
+    core-js: ^3.8.2
+    fast-deep-equal: ^3.1.3
+    global: ^4.4.0
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    regenerator-runtime: ^0.13.7
+    store2: ^2.12.0
+    telejson: ^5.3.3
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: f43e718c7aa05d81839ee74821231059b7fe304a8255a6b977c87b7fd9d7017ea55b53c79faca55af004449cf7c59621ae9986c4abebc1859b62b9f538f48bc1
+  languageName: node
+  linkType: hard
+
 "@storybook/babel-plugin-require-context-hook@npm:1.0.1":
   version: 1.0.1
   resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1"
@@ -3336,6 +3389,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channels@npm:6.5.0-alpha.46":
+  version: 6.5.0-alpha.46
+  resolution: "@storybook/channels@npm:6.5.0-alpha.46"
+  dependencies:
+    core-js: ^3.8.2
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+  checksum: 62a949a7d78d75ba7e71fb90d93904f357569f9b23310314873e2359a76a785569e1df444bc20d1167e162cccfebad28e87e0867691cd6fc639756261337ccb2
+  languageName: node
+  linkType: hard
+
 "@storybook/client-api@npm:6.4.19":
   version: 6.4.19
   resolution: "@storybook/client-api@npm:6.4.19"
@@ -3377,6 +3441,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-logger@npm:6.5.0-alpha.46, @storybook/client-logger@npm:^6.4.0 || >=6.5.0-0":
+  version: 6.5.0-alpha.46
+  resolution: "@storybook/client-logger@npm:6.5.0-alpha.46"
+  dependencies:
+    core-js: ^3.8.2
+    global: ^4.4.0
+  checksum: a8ec257f183ab4bc436b0f0a4e05a734b67c106fc025cc0c549fe9ba576468501b1de80b14acbb5408c91feae588b2dbd14278e1e2c3df5eaaf2180d456cf01d
+  languageName: node
+  linkType: hard
+
 "@storybook/components@npm:6.4.19":
   version: 6.4.19
   resolution: "@storybook/components@npm:6.4.19"
@@ -3519,6 +3593,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-events@npm:6.5.0-alpha.46":
+  version: 6.5.0-alpha.46
+  resolution: "@storybook/core-events@npm:6.5.0-alpha.46"
+  dependencies:
+    core-js: ^3.8.2
+  checksum: 5377f98af902a766e0b38debcdef33786cf82e66378482c521978d77c64c96cd35dee0a4d8c4f46392293e996c2b4da9c2af9bdb444cee3931b5143d571bb976
+  languageName: node
+  linkType: hard
+
 "@storybook/core-server@npm:6.4.19":
   version: 6.4.19
   resolution: "@storybook/core-server@npm:6.4.19"
@@ -3644,6 +3727,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/instrumenter@npm:^6.4.0 || >=6.5.0-0":
+  version: 6.5.0-alpha.46
+  resolution: "@storybook/instrumenter@npm:6.5.0-alpha.46"
+  dependencies:
+    "@storybook/addons": 6.5.0-alpha.46
+    "@storybook/client-logger": 6.5.0-alpha.46
+    "@storybook/core-events": 6.5.0-alpha.46
+    core-js: ^3.8.2
+    global: ^4.4.0
+  checksum: f4ff088ca0c46f7d20b82d043ee2b11354c833b868897c335aca3ac8d4ab55351732f37cac7e3f03f78d3fae41e823388082a216d81b2181c7128d0f84d6fa3d
+  languageName: node
+  linkType: hard
+
 "@storybook/manager-webpack4@npm:6.4.19":
   version: 6.4.19
   resolution: "@storybook/manager-webpack4@npm:6.4.19"
@@ -3828,6 +3924,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/router@npm:6.5.0-alpha.46":
+  version: 6.5.0-alpha.46
+  resolution: "@storybook/router@npm:6.5.0-alpha.46"
+  dependencies:
+    "@storybook/client-logger": 6.5.0-alpha.46
+    core-js: ^3.8.2
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: 722f127715d985dbfce52491b387165cec5a4e01f2762c9dec13a1b6cfabf76c98337004944ec446a8a012bbc63d2d7e0b0a7bf78f88203b4b35556bbeccd73a
+  languageName: node
+  linkType: hard
+
 "@storybook/semver@npm:^7.3.2":
   version: 7.3.2
   resolution: "@storybook/semver@npm:7.3.2"
@@ -3887,6 +3997,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/testing-library@npm:^0.0.9":
+  version: 0.0.9
+  resolution: "@storybook/testing-library@npm:0.0.9"
+  dependencies:
+    "@storybook/client-logger": ^6.4.0 || >=6.5.0-0
+    "@storybook/instrumenter": ^6.4.0 || >=6.5.0-0
+    "@testing-library/dom": ^8.3.0
+    "@testing-library/user-event": ^13.2.1
+    ts-dedent: ^2.2.0
+  checksum: 070a545bb9d97bcf2c4aebc6f698af55b3735d463200d4864650b4aff17334f5ed6ece0cebed5dd370d4015999e8875fe8aa08a01a067a1c827573cea457a9ff
+  languageName: node
+  linkType: hard
+
 "@storybook/testing-react@npm:^1.2.3":
   version: 1.2.3
   resolution: "@storybook/testing-react@npm:1.2.3"
@@ -3925,6 +4048,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:6.5.0-alpha.46":
+  version: 6.5.0-alpha.46
+  resolution: "@storybook/theming@npm:6.5.0-alpha.46"
+  dependencies:
+    "@storybook/client-logger": 6.5.0-alpha.46
+    core-js: ^3.8.2
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: af85f6c56da98f431464af7bc60a7619d78f02dd7b3192e238322ff76eaed31beebb6f968f101dde9e775ebd2689e9584d2c6c277ff709ae1c92dd041870c268
+  languageName: node
+  linkType: hard
+
 "@storybook/ui@npm:6.4.19":
   version: 6.4.19
   resolution: "@storybook/ui@npm:6.4.19"
@@ -3964,7 +4101,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.0.0":
+"@testing-library/dom@npm:^8.0.0, @testing-library/dom@npm:^8.3.0":
   version: 8.11.3
   resolution: "@testing-library/dom@npm:8.11.3"
   dependencies:
@@ -4011,7 +4148,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:^13.5.0":
+"@testing-library/user-event@npm:^13.2.1, @testing-library/user-event@npm:^13.5.0":
   version: 13.5.0
   resolution: "@testing-library/user-event@npm:13.5.0"
   dependencies:
@@ -4022,6 +4159,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tippyjs/react@npm:4.2.5":
+  version: 4.2.5
+  resolution: "@tippyjs/react@npm:4.2.5"
+  dependencies:
+    tippy.js: ^6.3.1
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 68a6bb8922597df105f601953f14c593a8179328026dc425db0cd5d8521cdd8ad8c6ec7b6d0707708c8ed25e5ad01c488e95a6b3de0b2f404bd71137e2b8fce9
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"
@@ -18205,6 +18354,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tippy.js@npm:^6.3.1":
+  version: 6.3.7
+  resolution: "tippy.js@npm:6.3.7"
+  dependencies:
+    "@popperjs/core": ^2.9.0
+  checksum: cac955318a65288e8d2dca05059878b003c6e66f92c94f7810f5bc5448eb6646abdf7dacc9bd00020e2611592598d0aae3a28ec9a45349a159603c3fdddce5fb
+  languageName: node
+  linkType: hard
+
 "title-case@npm:^3.0.3":
   version: 3.0.3
   resolution: "title-case@npm:3.0.3"