From b54f2075ec96dc862ea4ca6f35eee5e1ef39f0ab Mon Sep 17 00:00:00 2001
From: Dan Rukas <dan.rukas@gmail.com>
Date: Wed, 8 Jan 2025 13:10:57 -0500
Subject: [PATCH] ui(component): Tooltip component ui-next  (#4635)

Co-authored-by: sedghi <ar.sedghi@gmail.com>
---
 .../src/viewports/_getStatusComponent.tsx     | 22 ++++---
 .../src/viewports/_getStatusComponent.tsx     | 22 ++++---
 .../OHIFCornerstoneSRMeasurementViewport.tsx  | 22 ++++---
 .../src/panels/DynamicVolumeControls.tsx      | 43 ++++++-------
 .../viewports/TrackedCornerstoneViewport.tsx  | 56 +++++++----------
 platform/app/src/routes/WorkList/WorkList.tsx | 46 ++++++++++----
 .../3p9-to-3p10/General/index.md              | 15 +++++
 .../{Icons.md => UI/Migration-Icons.md}       |  3 +-
 .../3p9-to-3p10/UI/Migration-Tooltip.md       | 62 +++++++++++++++++++
 .../docs/migration-guide/3p9-to-3p10/index.md |  3 +
 .../src/components/Clipboard/Clipboard.tsx    | 55 ++++++++++++++++
 .../src/components/Clipboard/index.tsx        |  3 +
 .../ui-next/src/components/Icons/Icons.tsx    |  4 ++
 .../src/components/Icons/Sources/Copy.tsx     | 44 +++++++++++++
 .../Icons/Sources/FeedbackComplete.tsx        | 35 +++++++++++
 .../src/components/Tooltip/Tooltip.tsx        |  2 +-
 platform/ui-next/src/components/index.ts      |  3 +-
 platform/ui-next/src/index.ts                 |  2 +
 18 files changed, 342 insertions(+), 100 deletions(-)
 create mode 100644 platform/docs/docs/migration-guide/3p9-to-3p10/General/index.md
 rename platform/docs/docs/migration-guide/3p9-to-3p10/{Icons.md => UI/Migration-Icons.md} (99%)
 create mode 100644 platform/docs/docs/migration-guide/3p9-to-3p10/UI/Migration-Tooltip.md
 create mode 100644 platform/ui-next/src/components/Clipboard/Clipboard.tsx
 create mode 100644 platform/ui-next/src/components/Clipboard/index.tsx
 create mode 100644 platform/ui-next/src/components/Icons/Sources/Copy.tsx
 create mode 100644 platform/ui-next/src/components/Icons/Sources/FeedbackComplete.tsx

diff --git a/extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx b/extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx
index d270f278d..78b36ca63 100644
--- a/extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx
+++ b/extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon, Tooltip, ViewportActionButton } from '@ohif/ui';
-import { Icons } from '@ohif/ui-next';
+import { ViewportActionButton } from '@ohif/ui';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
 
 export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   let ToolTipMessage = null;
@@ -10,7 +10,6 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   switch (isHydrated) {
     case true:
       StatusIcon = () => <Icons.ByName name="status-alert" />;
-
       ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
       break;
     case false:
@@ -20,7 +19,6 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
           name="status-untracked"
         />
       );
-
       ToolTipMessage = () => <div>Click LOAD to load RTSTRUCT.</div>;
   }
 
@@ -44,14 +42,18 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   return (
     <>
       {ToolTipMessage && (
-        <Tooltip
-          content={<ToolTipMessage />}
-          position="bottom-left"
-        >
-          <StatusArea />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <StatusArea />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <ToolTipMessage />
+          </TooltipContent>
         </Tooltip>
       )}
       {!ToolTipMessage && <StatusArea />}
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx b/extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx
index 234337ede..836dca5bb 100644
--- a/extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx
+++ b/extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tooltip, ViewportActionButton } from '@ohif/ui';
-import { Icons } from '@ohif/ui-next';
+import { ViewportActionButton } from '@ohif/ui';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
 
 export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   let ToolTipMessage = null;
@@ -10,7 +10,6 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   switch (isHydrated) {
     case true:
       StatusIcon = () => <Icons.ByName name="status-alert" />;
-
       ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
       break;
     case false:
@@ -20,7 +19,6 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
           name="status-untracked"
         />
       );
-
       ToolTipMessage = () => <div>Click LOAD to load segmentation.</div>;
   }
 
@@ -44,14 +42,18 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   return (
     <>
       {ToolTipMessage && (
-        <Tooltip
-          content={<ToolTipMessage />}
-          position="bottom-left"
-        >
-          <StatusArea />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <StatusArea />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <ToolTipMessage />
+          </TooltipContent>
         </Tooltip>
       )}
       {!ToolTipMessage && <StatusArea />}
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx b/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx
index 48f8e8652..f028b225e 100644
--- a/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx
+++ b/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx
@@ -5,10 +5,11 @@ import { ExtensionManager, useToolbar } from '@ohif/core';
 
 import { setTrackingUniqueIdentifiersForElement } from '../tools/modules/dicomSRModule';
 
-import { Icon, Tooltip, useViewportGrid, ViewportActionArrows } from '@ohif/ui';
 import createReferencedImageDisplaySet from '../utils/createReferencedImageDisplaySet';
 import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
-import { Icons } from '@ohif/ui-next';
+import { useViewportGrid, ViewportActionArrows } from '@ohif/ui';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
+
 const MEASUREMENT_TRACKING_EXTENSION_ID = '@ohif/extension-measurement-tracking';
 
 const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';
@@ -467,11 +468,18 @@ function _getStatusComponent({
   return (
     <>
       {ToolTipMessage && (
-        <Tooltip
-          content={<ToolTipMessage />}
-          position="bottom-left"
-        >
-          <StatusArea />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <StatusArea />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent
+            side="bottom"
+            align="start"
+          >
+            <ToolTipMessage />
+          </TooltipContent>
         </Tooltip>
       )}
       {!ToolTipMessage && <StatusArea />}
diff --git a/extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx b/extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
index b632dfce7..f5dfa07cc 100644
--- a/extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
+++ b/extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
-import { Button, PanelSection, ButtonGroup, IconButton, InputNumber, Tooltip } from '@ohif/ui';
-
-import { DoubleSlider, Icons } from '@ohif/ui-next';
-
+import { Button, PanelSection, ButtonGroup, IconButton, InputNumber } from '@ohif/ui';
+import { DoubleSlider, Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
 import { Enums } from '@cornerstonejs/core';
 
 const controlClassNames = {
@@ -13,16 +11,18 @@ const controlClassNames = {
 
 const Header = ({ title, tooltip }) => (
   <div className="flex items-center space-x-1">
-    <Tooltip
-      content={<div className="text-white">{tooltip}</div>}
-      position="bottom-left"
-      tight={true}
-      tooltipBoxClassName="max-w-xs p-2"
-    >
-      <Icons.ByName
-        name="info-link"
-        className="text-primary-active h-[14px] w-[14px]"
-      />
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span>
+          <Icons.ByName
+            name="info-link"
+            className="text-primary-active h-[14px] w-[14px]"
+          />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent sideOffset={4} className="max-w-xs p-2 bg-primary-dark text-white">
+        <div>{tooltip}</div>
+      </TooltipContent>
     </Tooltip>
     <span className="text-aqua-pale text-[11px] uppercase">{title}</span>
   </div>
@@ -45,9 +45,7 @@ const DynamicVolumeControls = ({
   onDynamicClick,
 }) => {
   const [computedView, setComputedView] = useState(false);
-
   const [computeViewMode, setComputeViewMode] = useState(Enums.DynamicOperatorType.SUM);
-
   const [sliderRangeValues, setSliderRangeValues] = useState([0, framesLength - 1]);
 
   const handleSliderChange = newValues => {
@@ -113,15 +111,14 @@ const DynamicVolumeControls = ({
               <div>
                 Operation Buttons (SUM, AVERAGE, SUBTRACT): Select the mathematical operation to be
                 applied to the data set.
-                <br></br> Range Slider: Choose the numeric range within which the operation will be
+                <br /> Range Slider: Choose the numeric range within which the operation will be
                 performed.
-                <br></br>Generate Button: Execute the chosen operation on the specified range of
-                data.{' '}
+                <br />Generate Button: Execute the chosen operation on the specified range of data.
               </div>
             }
           />
           <ButtonGroup
-            className={`mt-2 w-full`}
+            className="mt-2 w-full"
             separated={true}
           >
             <button
@@ -190,8 +187,8 @@ function FrameControls({
         title="4D Controls"
         tooltip={
           <div>
-            Play/Pause Button: Begin or pause the animation of the 4D visualization. <br></br> Frame
-            Selector: Navigate through individual frames of the 4D data. <br></br> FPS (Frames Per
+            Play/Pause Button: Begin or pause the animation of the 4D visualization. <br /> Frame
+            Selector: Navigate through individual frames of the 4D data. <br /> FPS (Frames Per
             Second) Selector: Adjust the playback speed of the animation.
           </div>
         }
@@ -225,4 +222,4 @@ function FrameControls({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx
index 6690ee5a7..1d08250fe 100644
--- a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx
+++ b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
-import { Tooltip, ViewportActionArrows, useViewportGrid } from '@ohif/ui';
-import { Icons } from '@ohif/ui-next';
+import { ViewportActionArrows, useViewportGrid } from '@ohif/ui';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
 
 import { annotation } from '@cornerstonejs/tools';
 import { useTrackedMeasurements } from './../getContextModule';
@@ -235,11 +235,9 @@ function TrackedCornerstoneViewport(
   };
 
   return (
-    <>
-      <div className="relative flex h-full w-full flex-row overflow-hidden">
-        {getCornerstoneViewport()}
-      </div>
-    </>
+    <div className="relative flex h-full w-full flex-row overflow-hidden">
+      {getCornerstoneViewport()}
+    </div>
   );
 }
 
@@ -312,7 +310,7 @@ const _getArrowsComponent = (isTracked, switchMeasurement, isActiveViewport) =>
     <ViewportActionArrows
       onArrowsClick={direction => switchMeasurement(direction)}
       className={isActiveViewport ? 'visible' : 'invisible group-hover/pane:visible'}
-    ></ViewportActionArrows>
+    />
   );
 };
 
@@ -322,33 +320,23 @@ function _getStatusComponent(isTracked, t) {
   }
 
   return (
-    <div className="relative">
-      <Tooltip
-        position="bottom-left"
-        content={
-          <div className="flex py-2">
-            <div className="flex pt-1">
-              <Icons.InfoLink className="text-primary-main w-4" />
-            </div>
-            <div className="ml-4 flex">
-              <span className="text-common-light text-base">
-                {isTracked ? (
-                  <>{t('Series is tracked and can be viewed in the measurement panel')}</>
-                ) : (
-                  <>
-                    {t(
-                      'Measurements for untracked series will not be shown in the measurements panel'
-                    )}
-                  </>
-                )}
-              </span>
-            </div>
-          </div>
-        }
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span>
+          <Icons.StatusTracking className="text-aqua-pale" />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent
+        align="start"
+        side="bottom"
       >
-        <Icons.StatusTracking className="text-aqua-pale" />
-      </Tooltip>
-    </div>
+        {isTracked ? (
+          <>{t('Series is tracked and can be viewed in the measurement panel')}</>
+        ) : (
+          <>{t('Measurements for untracked series will not be shown in the measurements panel')}</>
+        )}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
diff --git a/platform/app/src/routes/WorkList/WorkList.tsx b/platform/app/src/routes/WorkList/WorkList.tsx
index 22d1e59b6..3d9c8b38c 100644
--- a/platform/app/src/routes/WorkList/WorkList.tsx
+++ b/platform/app/src/routes/WorkList/WorkList.tsx
@@ -14,13 +14,11 @@ import { utils, hotkeys } from '@ohif/core';
 import publicUrl from '../../utils/publicUrl';
 
 import {
-  Icon,
   StudyListExpandedRow,
   EmptyStudies,
   StudyListTable,
   StudyListPagination,
   StudyListFilter,
-  TooltipClipboard,
   useModal,
   AboutModal,
   UserPreferences,
@@ -31,12 +29,20 @@ import {
   ButtonEnums,
 } from '@ohif/ui';
 
-import { Header, Icons } from '@ohif/ui-next';
+import {
+  Header,
+  Icons,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  Clipboard,
+  Onboarding,
+  ScrollArea,
+} from '@ohif/ui-next';
 
 import { Types } from '@ohif/ui';
 
 import i18n from '@ohif/i18n';
-import { Onboarding, ScrollArea } from '@ohif/ui-next';
 
 const PatientInfoVisibility = Types.PatientInfoVisibility;
 
@@ -274,22 +280,37 @@ function WorkList({
         t('Common:localTimeFormat', 'hh:mm A')
       );
 
+    const makeCopyTooltipCell = textValue => {
+      if (!textValue) {
+        return '';
+      }
+      return (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="cursor-pointer truncate">{textValue}</span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <div className="flex items-center justify-between gap-2">
+              {textValue}
+              <Clipboard>{textValue}</Clipboard>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      );
+    };
+
     return {
       dataCY: `studyRow-${studyInstanceUid}`,
       clickableCY: studyInstanceUid,
       row: [
         {
           key: 'patientName',
-          content: patientName ? (
-            <TooltipClipboard>{patientName}</TooltipClipboard>
-          ) : (
-            <span className="text-gray-700">(Empty)</span>
-          ),
+          content: patientName ? makeCopyTooltipCell(patientName) : null,
           gridCol: 4,
         },
         {
           key: 'mrn',
-          content: <TooltipClipboard>{mrn}</TooltipClipboard>,
+          content: makeCopyTooltipCell(mrn),
           gridCol: 3,
         },
         {
@@ -305,7 +326,7 @@ function WorkList({
         },
         {
           key: 'description',
-          content: <TooltipClipboard>{description}</TooltipClipboard>,
+          content: makeCopyTooltipCell(description),
           gridCol: 4,
         },
         {
@@ -316,7 +337,7 @@ function WorkList({
         },
         {
           key: 'accession',
-          content: <TooltipClipboard>{accession}</TooltipClipboard>,
+          content: makeCopyTooltipCell(accession),
           gridCol: 3,
         },
         {
@@ -392,6 +413,7 @@ function WorkList({
                 query.append('configUrl', filterValues.configUrl);
               }
               query.append('StudyInstanceUIDs', studyInstanceUid);
+
               return (
                 mode.displayName && (
                   <Link
diff --git a/platform/docs/docs/migration-guide/3p9-to-3p10/General/index.md b/platform/docs/docs/migration-guide/3p9-to-3p10/General/index.md
new file mode 100644
index 000000000..ab72af70b
--- /dev/null
+++ b/platform/docs/docs/migration-guide/3p9-to-3p10/General/index.md
@@ -0,0 +1,15 @@
+---
+title: General
+---
+
+## HTML Template Update
+We have modified the `template.html` file so if you are using a custom template, you will need to update it.
+
+Here are the key changes needed in the migration:
+
+1. Added `window.PUBLIC_URL` declaration:
+```javascript
+window.PUBLIC_URL = '<%= PUBLIC_URL %>';
+```
+
+Was added before the `<!-- EXTENSIONS -->` comment block.
diff --git a/platform/docs/docs/migration-guide/3p9-to-3p10/Icons.md b/platform/docs/docs/migration-guide/3p9-to-3p10/UI/Migration-Icons.md
similarity index 99%
rename from platform/docs/docs/migration-guide/3p9-to-3p10/Icons.md
rename to platform/docs/docs/migration-guide/3p9-to-3p10/UI/Migration-Icons.md
index ee57e7181..7a2afed4d 100644
--- a/platform/docs/docs/migration-guide/3p9-to-3p10/Icons.md
+++ b/platform/docs/docs/migration-guide/3p9-to-3p10/UI/Migration-Icons.md
@@ -1,6 +1,5 @@
 ---
-sidebar_position: 2
-sidebar_label: Icons
+title: Icons
 ---
 
 ## Migration Guide: Icon Component Updates
diff --git a/platform/docs/docs/migration-guide/3p9-to-3p10/UI/Migration-Tooltip.md b/platform/docs/docs/migration-guide/3p9-to-3p10/UI/Migration-Tooltip.md
new file mode 100644
index 000000000..80a33acaa
--- /dev/null
+++ b/platform/docs/docs/migration-guide/3p9-to-3p10/UI/Migration-Tooltip.md
@@ -0,0 +1,62 @@
+---
+title: Tooltip
+---
+
+##  Tooltip Updates
+
+### Changes:
+- Updated Tooltip structure to use `Tooltip`, `TooltipTrigger`, and `TooltipContent`.
+- Removed deprecated `TooltipClipboard` and inline `content`/`position` properties.
+
+### Migration Steps:
+1. Replace imports:
+   ```tsx
+   // Before
+   import { Tooltip } from '@ohif/ui';
+   import { TooltipClipboard } from '@ohif/ui';
+
+   // After
+   import { Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
+   ```
+
+2. Update Tooltip usage:
+   ```tsx
+   // Before
+   <Tooltip content={<div>Tooltip Message</div>} position="bottom-left">
+     <Component />
+   </Tooltip>
+
+   // After
+   <Tooltip>
+     <TooltipTrigger asChild>
+       <Component />
+     </TooltipTrigger>
+     <TooltipContent side="bottom">
+       Tooltip Message
+     </TooltipContent>
+   </Tooltip>
+   ```
+
+
+3. TooltipClipboard Replacement:
+The `TooltipClipboard` component has been removed. Instead, use the `Clipboard` component inside `TooltipContent` for copying text functionality.
+
+#### Before:
+```tsx
+<TooltipClipboard>{text}</TooltipClipboard>
+```
+
+#### After:
+```tsx
+<Tooltip>
+  <TooltipTrigger asChild>
+    <span className="cursor-pointer truncate">{text}</span>
+  </TooltipTrigger>
+  <TooltipContent side="bottom">
+    <div className="flex items-center justify-between gap-2">
+      {text}
+      <Clipboard>{text}</Clipboard>
+    </div>
+  </TooltipContent>
+</Tooltip>
+```
diff --git a/platform/docs/docs/migration-guide/3p9-to-3p10/index.md b/platform/docs/docs/migration-guide/3p9-to-3p10/index.md
index 81316bf29..3709d5fee 100644
--- a/platform/docs/docs/migration-guide/3p9-to-3p10/index.md
+++ b/platform/docs/docs/migration-guide/3p9-to-3p10/index.md
@@ -4,3 +4,6 @@ sidebar_label: 3.9 -> 3.10 beta
 ---
 
 # Migration Guide
+
+
+## General
diff --git a/platform/ui-next/src/components/Clipboard/Clipboard.tsx b/platform/ui-next/src/components/Clipboard/Clipboard.tsx
new file mode 100644
index 000000000..0b515d868
--- /dev/null
+++ b/platform/ui-next/src/components/Clipboard/Clipboard.tsx
@@ -0,0 +1,55 @@
+import React, { ReactNode } from 'react';
+import { Button } from '../Button';
+import { Icons } from '../Icons';
+
+interface ClipboardProps {
+  children: ReactNode;
+}
+
+const Clipboard: React.FC<ClipboardProps> = ({ children }) => {
+  const [copyState, setCopyState] = React.useState<'idle' | 'success' | 'error'>('idle');
+  const copyText = React.useMemo(() => {
+    if (typeof children === 'string') {
+      return children.trim();
+    }
+    return '';
+  }, [children]);
+
+  const handleCopy = React.useCallback(async () => {
+    if (!copyText) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(copyText);
+      setCopyState('success');
+    } catch {
+      setCopyState('error');
+    } finally {
+      setTimeout(() => setCopyState('idle'), 1500); // Reset state after feedback
+    }
+  }, [copyText]);
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={e => {
+        e.stopPropagation();
+        handleCopy();
+      }}
+      className="text-white"
+      title="Copy"
+    >
+      {copyState === 'idle' && <Icons.Copy className="h-6 w-6" />}
+      {copyState === 'success' && <Icons.FeedbackComplete className="h-6 w-6 text-white" />}
+      {copyState === 'error' && (
+        <Icons.ByName
+          name="Error"
+          className="h-6 w-6 text-white"
+        />
+      )}
+    </Button>
+  );
+};
+
+export { Clipboard };
diff --git a/platform/ui-next/src/components/Clipboard/index.tsx b/platform/ui-next/src/components/Clipboard/index.tsx
new file mode 100644
index 000000000..0c7b4238b
--- /dev/null
+++ b/platform/ui-next/src/components/Clipboard/index.tsx
@@ -0,0 +1,3 @@
+import { Clipboard } from './Clipboard';
+
+export { Clipboard };
diff --git a/platform/ui-next/src/components/Icons/Icons.tsx b/platform/ui-next/src/components/Icons/Icons.tsx
index 349a4686e..bf9e6d910 100644
--- a/platform/ui-next/src/components/Icons/Icons.tsx
+++ b/platform/ui-next/src/components/Icons/Icons.tsx
@@ -7,6 +7,7 @@ import ChevronOpen from './Sources/ChevronOpen';
 import Code from './Sources/Code';
 import ColorChange from './Sources/ColorChange';
 import Controls from './Sources/Controls';
+import Copy from './Sources/Copy';
 import Delete from './Sources/Delete';
 import DicomTagBrowser from './Sources/DicomTagBrowser';
 import DisplayFillAndOutline from './Sources/DisplayFillAndOutline';
@@ -16,6 +17,7 @@ import Download from './Sources/Download';
 import Export from './Sources/Export';
 import EyeHidden from './Sources/EyeHidden';
 import EyeVisible from './Sources/EyeVisible';
+import FeedbackComplete from './Sources/FeedbackComplete';
 import GearSettings from './Sources/GearSettings';
 import Hide from './Sources/Hide';
 import IconMPR from './Sources/IconMPR';
@@ -418,6 +420,7 @@ export const Icons = {
   Code,
   ColorChange,
   Controls,
+  Copy,
   Delete,
   DicomTagBrowser,
   DisplayFillAndOutline,
@@ -430,6 +433,7 @@ export const Icons = {
   Export,
   EyeHidden,
   EyeVisible,
+  FeedbackComplete,
   GearSettings,
   Hide,
   IconMPR,
diff --git a/platform/ui-next/src/components/Icons/Sources/Copy.tsx b/platform/ui-next/src/components/Icons/Sources/Copy.tsx
new file mode 100644
index 000000000..35198c4ea
--- /dev/null
+++ b/platform/ui-next/src/components/Icons/Sources/Copy.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const Copy = (props: IconProps) => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g
+      id="Copy"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <rect
+        id="Rectangle"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      ></rect>
+      <rect
+        id="Rectangle"
+        stroke="currentColor"
+        x="8.95205173"
+        y="4.5"
+        width="10"
+        height="10"
+        rx="2"
+      ></rect>
+      <path
+        d="M7.05569885,9.5 L5.5,9.5 C4.67157288,9.5 4,10.1715729 4,11 L4,17.8271183 C4,18.6555454 4.67157288,19.3271183 5.5,19.3271183 L12.4520517,19.3271183 C13.2804789,19.3271183 13.9520517,18.6555454 13.9520517,17.8271183 L13.9520517,16.3489489 L13.9520517,16.3489489"
+        id="Path-4"
+        stroke="currentColor"
+        strokeLinecap="round"
+      ></path>
+    </g>
+  </svg>
+);
+
+export default Copy;
diff --git a/platform/ui-next/src/components/Icons/Sources/FeedbackComplete.tsx b/platform/ui-next/src/components/Icons/Sources/FeedbackComplete.tsx
new file mode 100644
index 000000000..a3df59a85
--- /dev/null
+++ b/platform/ui-next/src/components/Icons/Sources/FeedbackComplete.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const FeedbackComplete = (props: IconProps) => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g
+      id="FeedbackComplete"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <rect
+        id="Rectangle"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      ></rect>
+      <path
+        d="M6.5,12.5497794 L10.0873523,16.1371317 C10.4778766,16.527656 11.1110415,16.527656 11.5015658,16.1371317 C11.5482206,16.0904769 11.5901435,16.0393192 11.6267216,15.9844066 L17.6113609,7 L17.6113609,7"
+        id="Path-3"
+        stroke="currentColor"
+        strokeLinecap="round"
+      ></path>
+    </g>
+  </svg>
+);
+
+export default FeedbackComplete;
diff --git a/platform/ui-next/src/components/Tooltip/Tooltip.tsx b/platform/ui-next/src/components/Tooltip/Tooltip.tsx
index 93f940555..ad8151fb6 100644
--- a/platform/ui-next/src/components/Tooltip/Tooltip.tsx
+++ b/platform/ui-next/src/components/Tooltip/Tooltip.tsx
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'bg-primary-dark border-secondary-light text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded border px-3 py-1.5 text-sm',
+      'bg-primary-dark border-secondary-light text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded border px-2 py-1.5 text-sm',
       className
     )}
     {...props}
diff --git a/platform/ui-next/src/components/index.ts b/platform/ui-next/src/components/index.ts
index c4f8307c0..42ef70024 100644
--- a/platform/ui-next/src/components/index.ts
+++ b/platform/ui-next/src/components/index.ts
@@ -24,7 +24,7 @@ import {
   DialogDescription,
 } from './Dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select';
-
+import { Clipboard } from './Clipboard';
 import { Combobox } from './Combobox';
 import { Popover, PopoverContent, PopoverTrigger, PopoverAnchor } from './Popover';
 import { Calendar } from './Calendar';
@@ -183,4 +183,5 @@ export {
   CardTitle,
   CardDescription,
   CardContent,
+  Clipboard,
 };
diff --git a/platform/ui-next/src/index.ts b/platform/ui-next/src/index.ts
index e20cb012a..597f3540e 100644
--- a/platform/ui-next/src/index.ts
+++ b/platform/ui-next/src/index.ts
@@ -12,6 +12,7 @@ import {
   Tabs,
   TabsContent,
   TabsList,
+  Clipboard,
   TabsTrigger,
   Toggle,
   toggleVariants,
@@ -99,6 +100,7 @@ export {
   ThemeWrapper,
   Calendar,
   DatePickerWithRange,
+  Clipboard,
   // contextProviders
   NotificationProvider,
   useNotification,