From 68b8b04a1c3ae343085eaebc58003bdc6abacc66 Mon Sep 17 00:00:00 2001
From: Gustavo Lelis <galelis@gmail.com>
Date: Tue, 14 Apr 2020 09:11:14 -0300
Subject: [PATCH] =?UTF-8?q?Fix:=20Z-index=20issue=20for=20=E2=80=9Cannotat?=
 =?UTF-8?q?ion=20tools=E2=80=9D=20overlay=20Viewport=20ActionBar=20?=
 =?UTF-8?q?=E2=80=9CLabel=E2=80=9D=20(Checkmark=20+=20=E2=80=98A=E2=80=99)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 platform/ui/src/assets/styles/styles.css      | 16 +++++++
 .../ui/src/components/Thumbnail/Thumbnail.jsx |  2 +-
 .../ViewportActionBar/ViewportActionBar.jsx   |  4 +-
 .../src/views/ToolbarHeader/ToolbarHeader.mdx |  2 +-
 .../ui/src/views/Viewer/components/Header.js  |  2 +-
 .../Viewer/components/ViewportToolBar.js      | 43 +++++++++----------
 6 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/platform/ui/src/assets/styles/styles.css b/platform/ui/src/assets/styles/styles.css
index 8d3818264..13d38077a 100644
--- a/platform/ui/src/assets/styles/styles.css
+++ b/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;
diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx
index 9f8cad358..6100cc4d2 100644
--- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx
+++ b/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">
diff --git a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
index 16f22a9b3..c9ad9b1e5 100644
--- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
+++ b/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">
diff --git a/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx b/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx
index 1b5abbe59..b9d7be493 100644
--- a/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx
+++ b/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}
diff --git a/platform/ui/src/views/Viewer/components/Header.js b/platform/ui/src/views/Viewer/components/Header.js
index 9d90e7eb0..efbabaa8c 100644
--- a/platform/ui/src/views/Viewer/components/Header.js
+++ b/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}
diff --git a/platform/ui/src/views/Viewer/components/ViewportToolBar.js b/platform/ui/src/views/Viewer/components/ViewportToolBar.js
index 4daa92d37..1c9e342f0 100644
--- a/platform/ui/src/views/Viewer/components/ViewportToolBar.js
+++ b/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,30 +56,26 @@ 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'
-              )}
+          <div
+            className={classnames(
+              '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}
+            <svg
+              className="absolute text-primary-dark w-full 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"
             >
-              {tool.label}
-              <svg
-                className="absolute text-primary-dark w-full 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>
-          )}
+              <path fill="currentColor" d="M24 22h-24l12-20z" />
+            </svg>
+          </div>
         </div>
       );
     });