OHIF-202: Add tooltip for locked/unlocked SR viewport icon (#1858)

* OHIF-202: Add tooltip for locked/unlocked SR viewport icon

* fix edit margin

* Update platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

* Apply suggestions from code review

* Fix tooltip (func comp)

* Don't render the `0` of data.length used to check a render condition

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -52,22 +52,38 @@ const ViewportActionBar = ({
 
   const renderIconStatus = () => {
     if (modality === 'SR') {
+      const TooltipMessage = isLocked
+        ? () => (
+            <div>
+              This SR is locked. <br />
+              Measurements cannot be duplicated.
+            </div>
+          )
+        : () => (
+            <div>
+              This SR is unlocked. <br />
+              You can duplicate measurements on your current report <br /> by
+              clicking &apos;Edit&apos;.
+            </div>
+          );
       return (
         <>
-          <div className="relative flex p-1 border rounded border-primary-light">
-            <span className="text-sm font-bold leading-none text-primary-light">
-              SR
-            </span>
-            {isLocked && (
-              <Icon
-                name="lock"
-                className="absolute w-3 text-white"
-                style={{ top: -6, right: -6 }}
-              />
-            )}
-          </div>
+          <Tooltip content={<TooltipMessage />} position="bottom-left">
+            <div className="relative flex p-1 border rounded cursor-default border-primary-light">
+              <span className="text-sm font-bold leading-none text-primary-light">
+                SR
+              </span>
+              {isLocked && (
+                <Icon
+                  name="lock"
+                  className="absolute w-3 text-white"
+                  style={{ top: -6, right: -6 }}
+                />
+              )}
+            </div>
+          </Tooltip>
           {!isLocked && !isHydrated && (
-            <div className="relative flex p-1 border rounded border-primary-light">
+            <div className="relative flex p-1 ml-1 border rounded cursor-pointer border-primary-light">
               <span
                 className="text-sm font-bold leading-none text-primary-light"
                 onClick={onHydrationClick}