From 3d81d8d9a763c1071a98b5d5fdccc28cd3304eae Mon Sep 17 00:00:00 2001
From: Francis Terrero <terrero0611@gmail.com>
Date: Wed, 4 Mar 2026 23:52:40 -0400
Subject: [PATCH 1/2]   feat: improve Tooltip accessibility, API, and
 maintainability

  - Add ARIA support (role, aria-describedby, aria-hidden) and keyboard
    handling (focus/blur, Escape to dismiss)
  - Add new props: content, delayShowInMs, tooltipClassName, titleClassName,
    animation
  - Rename delayInMs to delayHideInMs for clarity
  - Allow hovering tooltip bubble when delayHideInMs is set
  - Extract position config into a constant and refactor show/hide logic
  - Replace lineHeight hack with flex layout
  - Update tests to use data-testid and role queries
---
 package.json                                  |   2 +-
 src/components/copyable/Copyable.tsx          |   2 +-
 src/components/tooltip/Tooltip.tsx            | 233 ++++++++++++------
 .../tooltip/__test__/Tooltip.test.tsx         |  89 +++----
 .../__snapshots__/Tooltip.test.tsx.snap       |  34 +--
 .../components/tooltip/Tooltip.stories.tsx    |   2 +-
 6 files changed, 221 insertions(+), 141 deletions(-)

diff --git a/package.json b/package.json
index 1971667..38bf600 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",
diff --git a/src/components/copyable/Copyable.tsx b/src/components/copyable/Copyable.tsx
index 578c55b..3a2b878 100644
--- a/src/components/copyable/Copyable.tsx
+++ b/src/components/copyable/Copyable.tsx
@@ -53,7 +53,7 @@ const Copyable = ({
         className="ml-6"
         popsFrom="bottom"
         title={justCopied ? copiedText : copyToClipboardText}
-        delayInMs={justCopied ? 500 : undefined}
+        delayHideInMs={justCopied ? 500 : undefined}
       >
         <button disabled={justCopied} onClick={onCopy}>
           <Copy className="shrink-0 text-gray-50 hover:text-gray-60" size={24} />
diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
index 8d0e229..4aec885 100644
--- a/src/components/tooltip/Tooltip.tsx
+++ b/src/components/tooltip/Tooltip.tsx
@@ -1,14 +1,22 @@
-import { ReactNode, useRef, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react';
 
-export interface TooltipProps {
+type TooltipContentProps =
+  | { content: ReactNode; title?: never; subtitle?: never }
+  | { content?: never; title: string; subtitle?: string };
+
+type TooltipBaseProps = {
   children: ReactNode;
-  title: string;
-  subtitle?: string;
   popsFrom: 'right' | 'left' | 'top' | 'bottom';
   className?: string;
-  delayInMs?: number;
+  delayHideInMs?: number;
+  delayShowInMs?: number;
   arrow?: boolean;
-}
+  tooltipClassName?: string;
+  titleClassName?: string;
+  animation?: 'scale' | 'fade' | 'none';
+};
+
+export type TooltipProps = TooltipBaseProps & TooltipContentProps;
 
 /**
  * Tooltip component
@@ -16,8 +24,11 @@ export interface TooltipProps {
  * @property {ReactNode} children
  * - The content that triggers the tooltip when hovered over.
  *
- * @property {string} title
- * - The main text displayed inside the tooltip. This is required.
+ * @property {string} [title]
+ * - The main text displayed inside the tooltip.
+ *
+ * @property {ReactNode} [content]
+ * - Custom content to render inside the tooltip bubble. When provided, `title` and `subtitle` are ignored.
  *
  * @property {string} [subtitle]
  * - An optional subtitle displayed below the main title inside the tooltip.
@@ -32,105 +43,181 @@ export interface TooltipProps {
  * @property {string} [className]
  * - Additional CSS classes to style the tooltip container. Use to override default styles.
  *
- * @property {number} [delayInMs]
+ * @property {number} [delayHideInMs]
  * - The delay (in milliseconds) before hiding the tooltip after the mouse leaves the trigger element.
  *   - If not provided, the tooltip hides immediately.
  *
+ * @property {number} [delayShowInMs]
+ * - The delay (in milliseconds) before showing the tooltip after the mouse enters the trigger element.
+ *   - If not provided, the tooltip shows immediately.
+ *
  * @property {boolean} [arrow=true]
  * - Whether to display the arrow pointing to the trigger element.
  *   - Default is true.
  *
+ * @property {string} [tooltipClassName]
+ * - Additional CSS classes to style the tooltip bubble (background, padding, border-radius).
+ *
+ * @property {string} [titleClassName]
+ * - Additional CSS classes to style the title text.
+ *
+ * @property {'scale' | 'fade' | 'none'} [animation='scale']
+ * - The animation style used when showing/hiding the tooltip.
+ *   - "scale": Scale and fade transition (default).
+ *   - "fade": Opacity-only transition.
+ *   - "none": No animation, instant show/hide.
+ *
  * @returns {JSX.Element}
  * - A tooltip component that shows additional information when hovering over its children.
  */
 
+const POSITION_CONFIG = {
+  right: {
+    tooltip: 'left-full top-1/2 -translate-y-1/2 ml-1.5',
+    triangle: 'flex-row-reverse',
+    clip: 'polygon(100% 0%, 100% 100%, 0% 50%)',
+    arrowSize: 'h-4 w-1.5',
+  },
+  left: {
+    tooltip: 'right-full top-1/2 -translate-y-1/2 mr-1.5',
+    triangle: 'flex-row',
+    clip: 'polygon(0% 0%, 0% 100%, 100% 50%)',
+    arrowSize: 'h-4 w-1.5',
+  },
+  top: {
+    tooltip: 'bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom',
+    triangle: 'flex-col',
+    clip: 'polygon(0% 0%, 100% 0%, 50% 100%)',
+    arrowSize: 'h-1.5 w-4',
+  },
+  bottom: {
+    tooltip: 'top-full left-1/2 -translate-x-1/2 mt-1.5',
+    triangle: 'flex-col-reverse',
+    clip: 'polygon(50% 0%, 0% 100%, 100% 100%)',
+    arrowSize: 'h-1.5 w-4',
+  },
+} as const;
+
+const clearTimeoutRef = (ref: React.MutableRefObject<ReturnType<typeof setTimeout> | null>) => {
+  if (ref.current !== null) {
+    clearTimeout(ref.current);
+    ref.current = null;
+  }
+};
+
 const Tooltip = ({
   children,
   title,
   subtitle,
+  content,
   popsFrom,
   className,
-  delayInMs,
+  delayHideInMs,
+  delayShowInMs,
   arrow = true,
+  tooltipClassName,
+  titleClassName,
+  animation = 'scale',
 }: TooltipProps): JSX.Element => {
   const [visible, setVisible] = useState(false);
+  const tooltipId = useId();
 
-  const timeoutRef = useRef<null | number>(null);
+  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  function show() {
-    setVisible(true);
-  }
+  const setVisibility = useCallback(
+    (value: boolean, delay?: number) => {
+      clearTimeoutRef(hideTimeoutRef);
+      clearTimeoutRef(showTimeoutRef);
 
-  function hide() {
-    setVisible(false);
-  }
+      if (delay === undefined) {
+        setVisible(value);
+        return;
+      }
 
-  function handleMouseEnter() {
-    if (timeoutRef.current !== null) {
-      clearTimeout(timeoutRef.current);
-    }
-    show();
-  }
-  function handleMouseLeave() {
-    if (delayInMs) {
-      timeoutRef.current = setTimeout(() => {
-        timeoutRef.current = null;
-        hide();
-      }, delayInMs) as unknown as number;
-    } else {
-      hide();
-    }
-  }
+      const ref = value ? showTimeoutRef : hideTimeoutRef;
+      ref.current = setTimeout(() => {
+        ref.current = null;
+        setVisible(value);
+      }, delay);
+    },
+    [],
+  );
 
-  let tooltipPosition = '';
-  let trianglePosition = '';
-  let triangle = '';
-
-  switch (popsFrom) {
-    case 'right':
-      tooltipPosition = 'left-full top-1/2 -translate-y-1/2 ml-1.5';
-      trianglePosition = 'flex-row-reverse';
-      triangle = 'polygon(100% 0%, 100% 100%, 0% 50%)';
-      break;
-    case 'left':
-      tooltipPosition = 'right-full top-1/2 -translate-y-1/2 mr-1.5';
-      trianglePosition = 'flex-row';
-      triangle = 'polygon(0% 0%, 0% 100%, 100% 50%)';
-      break;
-    case 'top':
-      tooltipPosition = 'bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom';
-      trianglePosition = 'flex-col';
-      triangle = 'polygon(0% 0%, 100% 0%, 50% 100%)';
-      break;
-    case 'bottom':
-      tooltipPosition = 'top-full left-1/2 -translate-x-1/2 mt-1.5';
-      trianglePosition = 'flex-col-reverse';
-      triangle = 'polygon(50% 0%, 0% 100%, 100% 100%)';
-      break;
-  }
+  const show = useCallback(() => setVisibility(true, delayShowInMs), [setVisibility, delayShowInMs]);
+  const hide = useCallback(() => setVisibility(false, delayHideInMs), [setVisibility, delayHideInMs]);
+
+  useEffect(() => {
+    return () => {
+      clearTimeoutRef(hideTimeoutRef);
+      clearTimeoutRef(showTimeoutRef);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!visible) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setVisible(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [visible]);
+
+  const ANIMATION_CLASSES = {
+    none: visible ? 'opacity-100' : 'invisible opacity-0',
+    fade: `transition-opacity duration-200 ${visible ? 'opacity-100' : 'opacity-0'}`,
+    scale: `transition-all duration-150 ${visible ? 'scale-100 opacity-100' : 'scale-50 opacity-0'}`,
+  };
+
+  const animationClass = ANIMATION_CLASSES[animation];
+
+  const { tooltip: tooltipPosition, triangle: trianglePosition, clip, arrowSize } = POSITION_CONFIG[popsFrom];
+
+  const isInteractive = delayHideInMs !== undefined;
 
   return (
     <div
-      className={`relative w-max ${className}`}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      style={{ lineHeight: 0 }}
+      data-testid="tooltip-container"
+      className={`relative flex w-max items-center ${className ?? ''}`}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocus={show}
+      onBlur={hide}
+      aria-describedby={visible ? tooltipId : undefined}
     >
       <div
-        className={`pointer-events-none absolute ${tooltipPosition} flex items-center ${trianglePosition} drop-shadow-tooltip transition-all duration-150 ${
-          visible ? 'scale-100 opacity-100' : 'scale-50 opacity-0'
-        }`}
+        role="tooltip"
+        id={tooltipId}
+        aria-hidden={!visible}
+        className={[
+          `absolute ${isInteractive ? '' : 'pointer-events-none'}`,
+          tooltipPosition,
+          'flex items-center',
+          trianglePosition,
+          'drop-shadow-tooltip',
+          animationClass,
+        ].join(' ')}
+        onMouseEnter={isInteractive ? show : undefined}
+        onMouseLeave={isInteractive ? hide : undefined}
       >
-        <div className="w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-5">
-          <p className="text-base text-white">{title}</p>
-          {subtitle && <p className="-mt-1 text-sm text-gray-40">{subtitle}</p>}
+        <div
+          className={tooltipClassName ?? 'w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-10'}
+        >
+          {content ?? (
+            <>
+              <span className={titleClassName ?? 'text-base text-white'}>{title}</span>
+              {subtitle && <p className="-mt-1 text-sm text-gray-40">{subtitle}</p>}
+            </>
+          )}
         </div>
         {arrow && (
           <div
-            className={`bg-gray-90 dark:bg-gray-5 ${
-              popsFrom === 'bottom' || popsFrom === 'top' ? 'h-1.5 w-4' : 'h-4 w-1.5'
-            }`}
-            style={{ clipPath: triangle, marginTop: popsFrom === 'top' ? '-1px' : undefined }}
+            className={`bg-gray-90 dark:bg-gray-10 ${arrowSize}`}
+            style={{ clipPath: clip, marginTop: popsFrom === 'top' ? '-1px' : undefined }}
             data-testid="tooltip-arrow"
           />
         )}
diff --git a/src/components/tooltip/__test__/Tooltip.test.tsx b/src/components/tooltip/__test__/Tooltip.test.tsx
index f364f03..94c85d4 100644
--- a/src/components/tooltip/__test__/Tooltip.test.tsx
+++ b/src/components/tooltip/__test__/Tooltip.test.tsx
@@ -29,10 +29,9 @@ describe('Tooltip', () => {
   });
 
   it('shows the tooltip on mouse enter', async () => {
-    const { getByText } = renderLoader();
+    const { getByText, getByTestId } = renderLoader();
 
-    const trigger = getByText('Hover me');
-    fireEvent.mouseEnter(trigger);
+    fireEvent.mouseEnter(getByTestId('tooltip-container'));
 
     await waitFor(() => {
       expect(getByText('Tooltip Title')).toBeVisible();
@@ -40,122 +39,110 @@ describe('Tooltip', () => {
   });
 
   it('hides the tooltip on mouse leave without delay', async () => {
-    const { getByText, queryByText } = renderLoader();
-
-    const trigger = getByText('Hover me');
-    fireEvent.mouseEnter(trigger);
-    fireEvent.mouseLeave(trigger);
+    const { getByTestId, getByRole } = renderLoader();
 
-    const element = queryByText('Tooltip Title')?.parentElement?.parentElement;
+    const container = getByTestId('tooltip-container');
+    fireEvent.mouseEnter(container);
+    fireEvent.mouseLeave(container);
 
     await waitFor(() => {
-      expect(element).toHaveClass('opacity-0');
+      expect(getByRole('tooltip', { hidden: true })).toHaveClass('opacity-0');
     });
   });
 
-  it('applies delay before hiding tooltip when delayInMs is set', async () => {
-    const { getByText, queryByText } = renderLoader({ delayInMs: 100 });
+  it('applies delay before hiding tooltip when delayHideInMs is set', async () => {
+    const { getByTestId, getByRole } = renderLoader({ delayHideInMs: 100 });
 
-    const trigger = getByText('Hover me');
-    fireEvent.mouseEnter(trigger);
-    fireEvent.mouseLeave(trigger);
+    const container = getByTestId('tooltip-container');
+    fireEvent.mouseEnter(container);
+    fireEvent.mouseLeave(container);
 
-    const element = queryByText('Tooltip Title')?.parentElement?.parentElement;
+    const tooltip = getByRole('tooltip');
 
     await waitFor(() => {
-      expect(element).toHaveClass('opacity-100');
+      expect(tooltip).toHaveClass('opacity-100');
     });
 
     await waitFor(
       () => {
-        expect(element).toHaveClass('opacity-0');
+        expect(tooltip).toHaveClass('opacity-0');
       },
       { timeout: 300 },
     );
   });
 
   it('renders subtitle if provided', () => {
-    const { getByText } = renderLoader({ subtitle: 'Tooltip Subtitle' });
+    const { getByText, getByTestId } = renderLoader({ subtitle: 'Tooltip Subtitle' });
 
-    fireEvent.mouseEnter(getByText('Hover me'));
+    fireEvent.mouseEnter(getByTestId('tooltip-container'));
 
     expect(getByText('Tooltip Subtitle')).toBeVisible();
   });
 
   it('renders the arrow by default', () => {
-    const { getByText, getByTestId } = renderLoader();
+    const { getByTestId } = renderLoader();
 
-    fireEvent.mouseEnter(getByText('Hover me'));
-    const arrow = getByTestId('tooltip-arrow');
+    fireEvent.mouseEnter(getByTestId('tooltip-container'));
 
-    expect(arrow).toBeInTheDocument();
+    expect(getByTestId('tooltip-arrow')).toBeInTheDocument();
   });
 
   it('does not render the arrow if `arrow` is false', () => {
-    const { getByText, queryByTestId } = renderLoader({ arrow: false });
+    const { getByTestId, queryByTestId } = renderLoader({ arrow: false });
 
-    fireEvent.mouseEnter(getByText('Hover me'));
-    const arrow = queryByTestId('tooltip-arrow');
+    fireEvent.mouseEnter(getByTestId('tooltip-container'));
 
-    expect(arrow).not.toBeInTheDocument();
+    expect(queryByTestId('tooltip-arrow')).not.toBeInTheDocument();
   });
 
   it('applies the correct position when popsFrom is top', () => {
-    const { getByText } = renderLoader();
-
-    fireEvent.mouseEnter(getByText('Hover me'));
+    const { getByRole } = renderLoader();
 
-    const tooltip = getByText('Tooltip Title').parentElement?.parentElement;
+    const tooltip = getByRole('tooltip', { hidden: true });
 
     expect(tooltip).toHaveClass('bottom-full');
   });
 
   it('applies the correct position when popsFrom is bottom', () => {
-    const { getByText } = renderLoader({ popsFrom: 'bottom' });
+    const { getByRole } = renderLoader({ popsFrom: 'bottom' });
 
-    fireEvent.mouseEnter(getByText('Hover me'));
-
-    const tooltip = getByText('Tooltip Title').parentElement?.parentElement;
+    const tooltip = getByRole('tooltip', { hidden: true });
 
     expect(tooltip).toHaveClass('top-full');
   });
 
   it('applies the correct position when popsFrom is left', () => {
-    const { getByText } = renderLoader({ popsFrom: 'left' });
-
-    fireEvent.mouseEnter(getByText('Hover me'));
+    const { getByRole } = renderLoader({ popsFrom: 'left' });
 
-    const tooltip = getByText('Tooltip Title').parentElement?.parentElement;
+    const tooltip = getByRole('tooltip', { hidden: true });
 
     expect(tooltip).toHaveClass('right-full');
   });
 
   it('applies the correct position when popsFrom is right', () => {
-    const { getByText } = renderLoader({ popsFrom: 'right' });
-
-    fireEvent.mouseEnter(getByText('Hover me'));
+    const { getByRole } = renderLoader({ popsFrom: 'right' });
 
-    const tooltip = getByText('Tooltip Title').parentElement?.parentElement;
+    const tooltip = getByRole('tooltip', { hidden: true });
 
     expect(tooltip).toHaveClass('left-full');
   });
 
   it('applies custom className if provided', () => {
-    const { getByText } = renderLoader({ className: 'custom-class' });
+    const { getByTestId } = renderLoader({ className: 'custom-class' });
 
-    const container = getByText('Hover me').parentElement;
-
-    expect(container).toHaveClass('custom-class');
+    expect(getByTestId('tooltip-container')).toHaveClass('custom-class');
   });
 
   it('should clear the timeout on mouse enter', () => {
     const clearTimeoutMock = vi.fn();
     global.clearTimeout = clearTimeoutMock;
 
-    const { getByText } = renderLoader({ delayInMs: 100 });
-    fireEvent.mouseLeave(getByText('Hover me'));
-    fireEvent.mouseEnter(getByText('Hover me'));
+    const { getByTestId } = renderLoader({ delayHideInMs: 100 });
+    const container = getByTestId('tooltip-container');
+    fireEvent.mouseLeave(container);
+    fireEvent.mouseEnter(container);
 
     expect(clearTimeoutMock).toHaveBeenCalled();
   });
+
 });
diff --git a/src/components/tooltip/__test__/__snapshots__/Tooltip.test.tsx.snap b/src/components/tooltip/__test__/__snapshots__/Tooltip.test.tsx.snap
index ea9d275..068c0de 100644
--- a/src/components/tooltip/__test__/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/components/tooltip/__test__/__snapshots__/Tooltip.test.tsx.snap
@@ -6,23 +6,26 @@ exports[`Tooltip > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="relative w-max undefined"
-        style="line-height: 0;"
+        class="relative flex w-max items-center "
+        data-testid="tooltip-container"
       >
         <div
-          class="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom flex items-center flex-col drop-shadow-tooltip transition-all duration-150 scale-50 opacity-0"
+          aria-hidden="true"
+          class="absolute pointer-events-none bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom flex items-center flex-col drop-shadow-tooltip transition-all duration-150 scale-50 opacity-0"
+          id=":r0:"
+          role="tooltip"
         >
           <div
-            class="w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-5"
+            class="w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-10"
           >
-            <p
+            <span
               class="text-base text-white"
             >
               Tooltip Title
-            </p>
+            </span>
           </div>
           <div
-            class="bg-gray-90 dark:bg-gray-5 h-1.5 w-4"
+            class="bg-gray-90 dark:bg-gray-10 h-1.5 w-4"
             data-testid="tooltip-arrow"
             style="clip-path: polygon(0% 0%, 100% 0%, 50% 100%); margin-top: -1px;"
           />
@@ -35,23 +38,26 @@ exports[`Tooltip > should match snapshot 1`] = `
   </body>,
   "container": <div>
     <div
-      class="relative w-max undefined"
-      style="line-height: 0;"
+      class="relative flex w-max items-center "
+      data-testid="tooltip-container"
     >
       <div
-        class="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom flex items-center flex-col drop-shadow-tooltip transition-all duration-150 scale-50 opacity-0"
+        aria-hidden="true"
+        class="absolute pointer-events-none bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom flex items-center flex-col drop-shadow-tooltip transition-all duration-150 scale-50 opacity-0"
+        id=":r0:"
+        role="tooltip"
       >
         <div
-          class="w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-5"
+          class="w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-10"
         >
-          <p
+          <span
             class="text-base text-white"
           >
             Tooltip Title
-          </p>
+          </span>
         </div>
         <div
-          class="bg-gray-90 dark:bg-gray-5 h-1.5 w-4"
+          class="bg-gray-90 dark:bg-gray-10 h-1.5 w-4"
           data-testid="tooltip-arrow"
           style="clip-path: polygon(0% 0%, 100% 0%, 50% 100%); margin-top: -1px;"
         />
diff --git a/src/stories/components/tooltip/Tooltip.stories.tsx b/src/stories/components/tooltip/Tooltip.stories.tsx
index df0bc8d..ae3fb10 100644
--- a/src/stories/components/tooltip/Tooltip.stories.tsx
+++ b/src/stories/components/tooltip/Tooltip.stories.tsx
@@ -13,7 +13,7 @@ const meta: Meta<typeof Tooltip> = {
     subtitle: 'Optional subtitle',
     popsFrom: 'top',
     arrow: true,
-    delayInMs: 300,
+    delayHideInMs: 300,
   },
   tags: ['autodocs'],
 };

From a42a1761f5d4e1aae9bb161dd6245495dbdb94de Mon Sep 17 00:00:00 2001
From: Francis Terrero <terrero0611@gmail.com>
Date: Fri, 6 Mar 2026 01:08:04 -0400
Subject: [PATCH 2/2] feat: update Copyable component tooltip for improved
 accessibility and styling

---
 .../__snapshots__/Copyable.test.tsx.snap      | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/copyable/__test__/__snapshots__/Copyable.test.tsx.snap b/src/components/copyable/__test__/__snapshots__/Copyable.test.tsx.snap
index bc72215..5d15e0b 100644
--- a/src/components/copyable/__test__/__snapshots__/Copyable.test.tsx.snap
+++ b/src/components/copyable/__test__/__snapshots__/Copyable.test.tsx.snap
@@ -14,23 +14,26 @@ exports[`Copyable Component > should match snapshot 1`] = `
           Text to copy
         </p>
         <div
-          class="relative w-max ml-6"
-          style="line-height: 0;"
+          class="relative flex w-max items-center ml-6"
+          data-testid="tooltip-container"
         >
           <div
-            class="pointer-events-none absolute top-full left-1/2 -translate-x-1/2 mt-1.5 flex items-center flex-col-reverse drop-shadow-tooltip transition-all duration-150 scale-50 opacity-0"
+            aria-hidden="true"
+            class="absolute pointer-events-none top-full left-1/2 -translate-x-1/2 mt-1.5 flex items-center flex-col-reverse drop-shadow-tooltip transition-all duration-150 scale-50 opacity-0"
+            id=":r0:"
+            role="tooltip"
           >
             <div
-              class="w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-5"
+              class="w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-10"
             >
-              <p
+              <span
                 class="text-base text-white"
               >
                 Copy to clipboard
-              </p>
+              </span>
             </div>
             <div
-              class="bg-gray-90 dark:bg-gray-5 h-1.5 w-4"
+              class="bg-gray-90 dark:bg-gray-10 h-1.5 w-4"
               data-testid="tooltip-arrow"
               style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"
             />
@@ -63,23 +66,26 @@ exports[`Copyable Component > should match snapshot 1`] = `
         Text to copy
       </p>
       <div
-        class="relative w-max ml-6"
-        style="line-height: 0;"
+        class="relative flex w-max items-center ml-6"
+        data-testid="tooltip-container"
       >
         <div
-          class="pointer-events-none absolute top-full left-1/2 -translate-x-1/2 mt-1.5 flex items-center flex-col-reverse drop-shadow-tooltip transition-all duration-150 scale-50 opacity-0"
+          aria-hidden="true"
+          class="absolute pointer-events-none top-full left-1/2 -translate-x-1/2 mt-1.5 flex items-center flex-col-reverse drop-shadow-tooltip transition-all duration-150 scale-50 opacity-0"
+          id=":r0:"
+          role="tooltip"
         >
           <div
-            class="w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-5"
+            class="w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-10"
           >
-            <p
+            <span
               class="text-base text-white"
             >
               Copy to clipboard
-            </p>
+            </span>
           </div>
           <div
-            class="bg-gray-90 dark:bg-gray-5 h-1.5 w-4"
+            class="bg-gray-90 dark:bg-gray-10 h-1.5 w-4"
             data-testid="tooltip-arrow"
             style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"
           />