Fix: Z-index issue for “annotation tools” overlay Viewport ActionBar “Label” (Checkmark + ‘A’)

platform/ui/src/assets/styles/styles.css

@@ -20,6 +20,22 @@
   @apply hidden;
 }
 
+.invisible-scrollbar::-webkit-scrollbar-track {
+  @apply hidden;
+}
+
+.invisible-scrollbar::-webkit-scrollbar-thumb {
+  @apply hidden;
+}
+
+.invisible-scrollbar::-webkit-scrollbar-thumb:window-inactive {
+  @apply hidden;
+}
+
+.tooltip {
+  @apply z-10 absolute;
+}
+
 /* TOOLTIP WORKAROUND FOR ARROW UP */
 .tooltip.tooltip-up::before {
   @apply bg-primary-dark absolute z-10;

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -36,7 +36,7 @@ const Thumbnail = ({
           </div>
           <div
             className={classnames(
-              'tooltip tooltip-right absolute bg-black border border-secondary-main text-common-light text-base rounded py-2 px-4 top-0 w-max-content hidden'
+              '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">

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

@@ -38,7 +38,7 @@ const ViewportActionBar = ({ isTracked, isLocked, modality }) => {
         {isTracked && (
           <div
             className={classnames(
-              'tooltip tooltip-top-left absolute 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'
+              '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">
@@ -111,7 +111,7 @@ const ViewportActionBar = ({ isTracked, isLocked, modality }) => {
           </div>
           <div
             className={classnames(
-              'tooltip tooltip-top-right absolute 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'
+              '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">

platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx

@@ -86,7 +86,7 @@ components.
             {shouldShowTooltip && (
               <div
                 className={classnames(
-                  'tooltip tooltip-up absolute 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'
+                  'tooltip tooltip-up 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'
                 )}
               >
                 {tool.label}

platform/ui/src/views/Viewer/components/Header.js

@@ -71,7 +71,7 @@ const Header = () => {
           {shouldShowTooltip && (
             <div
               className={classnames(
-                'tooltip tooltip-up absolute 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'
+                'tooltip tooltip-up 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'
               )}
             >
               {tool.label}

platform/ui/src/views/Viewer/components/ViewportToolBar.js

@@ -5,7 +5,6 @@ import { Icon, IconButton } from '@ohif/ui';
 
 const ViewportToolbar = () => {
   const [activeTool, setActiveTool] = useState(null);
-  const [showTooltip, setShowTooltip] = useState(null);
   const tools = [
     {
       id: 'Annotate',
@@ -43,9 +42,11 @@ const ViewportToolbar = () => {
   const renderToolbar = () => {
     return tools.map((tool, i) => {
       const isActive = activeTool === tool.id;
-      const shouldShowTooltip = showTooltip === tool.id;
       return (
-        <div className="relative flex justify-center" key={tool.id}>
+        <div
+          className="relative flex justify-center showTooltipOnHover"
+          key={tool.id}
+        >
           <IconButton
             variant={isActive ? 'contained' : 'text'}
             className={classnames('mx-1', {
@@ -55,15 +56,12 @@ const ViewportToolbar = () => {
             onClick={(e) => {
               setActiveTool(tool.id);
             }}
-            onMouseOver={() => setShowTooltip(tool.id)}
-            onMouseOut={() => setShowTooltip(null)}
           >
             <Icon name={tool.icon} />
           </IconButton>
-          {shouldShowTooltip && (
           <div
             className={classnames(
-                'tooltip tooltip-up absolute 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'
+              'tooltip tooltip-up 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'
             )}
           >
             {tool.label}
@@ -78,7 +76,6 @@ const ViewportToolbar = () => {
               <path fill="currentColor" d="M24 22h-24l12-20z" />
             </svg>
           </div>
-          )}
         </div>
       );
     });