Implement tooltip on remaining paces

platform/ui/src/components/MeasurementTable/MeasurementTable.jsx

@@ -28,6 +28,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
                 onClick={() => onClick(measurementItem.id)}
                 onKeyDown={() => onClick(measurementItem.id)}
                 role="button"
+                tabIndex="0"
               >
                 <div
                   className={classnames(
@@ -60,6 +61,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
                       right: 4,
                       transform: isActive ? '' : 'translateX(100%)',
                     }}
+                    e
                     onClick={(e) => {
                       // stopPropagation needed to avoid disable the current active item
                       e.stopPropagation();

platform/ui/src/components/SegmentationTable/SegmentationTable.jsx

@@ -43,6 +43,16 @@ const SegmentationTable = ({ title, amount, data }) => {
             const itemKey = i;
             const currentItem = i + 1;
             const isActive = !!activeItem && activeItem[title] === i;
+
+            const handleOnClick = () => {
+              setActiveItem((s) => {
+                return {
+                  ...s,
+                  [title]: s && s[title] === itemKey ? null : itemKey,
+                };
+              });
+            };
+
             return (
               <div
                 key={i}
@@ -52,14 +62,10 @@ const SegmentationTable = ({ title, amount, data }) => {
                     'border-primary-light': isActive,
                   }
                 )}
-                onClick={() => {
+                onClick={handleOnClick}
-                  setActiveItem((s) => {
+                onKeyDown={handleOnClick}
-                    return {
+                role="button"
-                      ...s,
+                tabIndex="0"
-                      [title]: s && s[title] === itemKey ? null : itemKey,
-                    };
-                  });
-                }}
               >
                 <div
                   className={classnames(

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, Thumbnail } from '@ohif/ui';
+import { Icon, Thumbnail, Tooltip } from '@ohif/ui';
 
 const ThumbnailTracked = ({
   className,
@@ -29,51 +29,37 @@ const ThumbnailTracked = ({
         <div
           className={classnames(
             'flex flex-col items-center justify-start p-2 mb-2 relative cursor-pointer',
-            isTracked && 'rounded-sm hover:bg-gray-900 showTooltipOnHover'
+            isTracked && 'rounded-sm hover:bg-gray-900'
           )}
         >
-          <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
+          <Tooltip
-          <div className="text-white text-xl leading-tight h-5">
+            position="right"
-            {viewportIdentificator}
+            content={
-          </div>
+              <div className="flex flex-row flex-1">
-          <div
+                <div className="flex flex-col flex-1 pr-4">
-            className={classnames(
-              'tooltip tooltip-right bg-black border border-secondary-main text-common-light text-base rounded py-2 px-4 top-0 w-max-content hidden'
-            )}
-          >
-            <div className="flex flex-row flex-1">
-              <div className="flex flex-col flex-1 pr-4">
-                <span>
-                  Series is <span className="text-white">tracked</span>
-                </span>
-                {viewportIdentificator && (
                   <span>
-                    in viewport
+                    Series is <span className="text-white">tracked</span>
-                    <span className="ml-1 text-white">
-                      {viewportIdentificator}
-                    </span>
                   </span>
-                )}
+                  {viewportIdentificator && (
-              </div>
+                    <span>
-              <div className="flex flex-2 items-center justify-center">
+                      in viewport
-                <Icon name="info-link" className="text-primary-active" />
+                      <span className="ml-1 text-white">
+                        {viewportIdentificator}
+                      </span>
+                    </span>
+                  )}
+                </div>
+                <div className="flex flex-2 items-center justify-center">
+                  <Icon name="info-link" className="text-primary-active" />
+                </div>
               </div>
+            }
+          >
+            <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
+            <div className="text-white text-xl leading-tight h-5">
+              {viewportIdentificator}
             </div>
-            <svg
+          </Tooltip>
-              className="absolute text-black stroke-secondary-main stroke-2"
-              style={{
-                top: 'calc(50% - 8px)',
-                left: -15,
-                transform: 'rotate(270deg)',
-              }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
-          </div>
         </div>
         {isTracked && (
           <Icon

platform/ui/src/components/Tooltip/Tooltip.jsx

@@ -26,19 +26,27 @@ const arrowPositionStyle = {
 
 const Tooltip = ({ position, content, tight, children }) => {
   const [isActive, setIsActive] = useState(false);
+
+  const handleMouseOver = () => {
+    if (!isActive) {
+      setIsActive(true);
+    }
+  };
+
+  const handleMouseOut = () => {
+    if (isActive) {
+      setIsActive(false);
+    }
+  };
+
   return (
     <div
-      className="relative"
+      className="relative "
-      onMouseOver={() => {
+      onMouseOver={handleMouseOver}
-        if (!isActive) {
+      onFocus={handleMouseOver}
-          setIsActive(true);
+      onMouseOut={handleMouseOut}
-        }
+      onBlur={handleMouseOut}
-      }}
+      role="tooltip"
-      onMouseOut={() => {
-        if (isActive) {
-          setIsActive(false);
-        }
-      }}
     >
       {children}
       <div

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, ButtonGroup, Button } from '@ohif/ui';
+import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui';
 
 const classes = {
   infoHeader: 'text-base text-primary-light',
@@ -51,40 +51,29 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
     }
 
     return (
-      <div className="showTooltipOnHover relative">
+      <div className="relative">
-        <Icon
+        {!isTracked ? (
-          name={isTracked ? 'tracked' : 'dotted-circle'}
+          <Icon name="dotted-circle" className="text-primary-light w-6" />
-          className="text-primary-light w-6"
+        ) : (
-        />
+          <Tooltip
-        {isTracked && (
+            position="bottom-left"
-          <div
+            content={
-            className={classnames(
+              <div className="flex py-2">
-              'tooltip tooltip-top-left bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
+                <div className="flex pt-1">
-            )}
+                  <Icon name="info-link" className="w-4 text-primary-main" />
+                </div>
+                <div className="flex ml-4">
+                  <span className="text-base text-common-light">
+                    Series is
+                    <span className="text-white font-bold"> tracked</span> and
+                    can be viewed <br /> in the measurement panel
+                  </span>
+                </div>
+              </div>
+            }
           >
-            <div className="flex py-2">
+            <Icon name="tracked" className="text-primary-light w-6" />
-              <div className="flex pt-1">
+          </Tooltip>
-                <Icon name="info-link" className="w-4 text-primary-main" />
-              </div>
-              <div className="flex ml-4">
-                <span className="text-base text-common-light">
-                  Series is
-                  <span className="text-white font-bold"> tracked</span> and can
-                  be viewed <br /> in the measurement panel
-                </span>
-              </div>
-            </div>
-            <svg
-              className="absolute text-primary-dark h-4 left-0 stroke-secondary-main"
-              style={{ top: -15 }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
-          </div>
         )}
       </div>
     );
@@ -129,20 +118,9 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
         </ButtonGroup>
       </div>
       <div className="flex ml-4 mr-2">
-        <div className="showTooltipOnHover flex justify-end relative">
+        <Tooltip
-          <div className="relative">
+          position="bottom-right"
-            <Icon name="profile" className="text-white w-5" />
+          content={
-            <Icon
-              name="info-link"
-              className="bg-black text-white w-5 absolute"
-              style={{ right: -7, bottom: -10 }}
-            />
-          </div>
-          <div
-            className={classnames(
-              'tooltip tooltip-top-right bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content ml-1'
-            )}
-          >
             <div className="flex py-2">
               <div className="flex pt-1">
                 <Icon name="info-link" className="w-4 text-primary-main" />
@@ -197,18 +175,19 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
                 </div>
               </div>
             </div>
-            <svg
+          }
-              className="absolute text-primary-dark h-4 right-0 stroke-secondary-main"
+        >
-              style={{ top: -15 }}
+          <div className="showTooltipOnHover flex justify-end relative">
-              xmlns="http://www.w3.org/2000/svg"
+            <div className="relative">
-              width="24"
+              <Icon name="profile" className="text-white w-5" />
-              height="24"
+              <Icon
-              viewBox="0 0 24 24"
+                name="info-link"
-            >
+                className="bg-black text-white w-5 absolute"
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
+                style={{ right: -7, bottom: -10 }}
-            </svg>
+              />
+            </div>
           </div>
-        </div>
+        </Tooltip>
       </div>
     </div>
   );

platform/ui/src/components/ViewportGrid/ViewportGrid.jsx

@@ -9,7 +9,7 @@ const ViewportGrid = ({ rows, cols, viewportContents }) => {
       <div
         key={index}
         className={classnames(
-          'rounded-lg hover:border-primary-light transition duration-300',
+          'rounded-lg hover:border-primary-light transition duration-300 outline-none',
           {
             'border-2 border-primary-light -m-px': isActive,
             'border border-secondary-light': !isActive,