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,18 +29,12 @@ 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" />
-          <div className="text-white text-xl leading-tight h-5">
-            {viewportIdentificator}
-          </div>
-          <div
-            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'
           )}
         >
+          <Tooltip
+            position="right"
+            content={
               <div className="flex flex-row flex-1">
                 <div className="flex flex-col flex-1 pr-4">
                   <span>
@@ -59,21 +53,13 @@ const ThumbnailTracked = ({
                   <Icon name="info-link" className="text-primary-active" />
                 </div>
               </div>
-            <svg
+            }
-              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" />
+            <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
-            </svg>
+            <div className="text-white text-xl leading-tight h-5">
+              {viewportIdentificator}
             </div>
+          </Tooltip>
         </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);
-  return (
+
-    <div
+  const handleMouseOver = () => {
-      className="relative"
-      onMouseOver={() => {
     if (!isActive) {
       setIsActive(true);
     }
-      }}
+  };
-      onMouseOut={() => {
+
+  const handleMouseOut = () => {
     if (isActive) {
       setIsActive(false);
     }
-      }}
+  };
+
+  return (
+    <div
+      className="relative "
+      onMouseOver={handleMouseOver}
+      onFocus={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onBlur={handleMouseOut}
+      role="tooltip"
     >
       {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,17 +51,13 @@ 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(
-              '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 py-2">
                 <div className="flex pt-1">
                   <Icon name="info-link" className="w-4 text-primary-main" />
@@ -69,22 +65,15 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
                 <div className="flex ml-4">
                   <span className="text-base text-common-light">
                     Series is
-                  <span className="text-white font-bold"> tracked</span> and can
+                    <span className="text-white font-bold"> tracked</span> and
-                  be viewed <br /> in the measurement panel
+                    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" />
+            <Icon name="tracked" className="text-primary-light w-6" />
-            </svg>
+          </Tooltip>
-          </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 }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
         >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
+          <div className="showTooltipOnHover flex justify-end relative">
-            </svg>
+            <div className="relative">
+              <Icon name="profile" className="text-white w-5" />
+              <Icon
+                name="info-link"
+                className="bg-black text-white w-5 absolute"
+                style={{ right: -7, bottom: -10 }}
+              />
             </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,