Nested toolbar w/ "sticky" when clicked

platform/ui/src/components/ToolbarButton/ToolbarButton.jsx

@@ -28,6 +28,7 @@ const ToolbarButton = ({
   return (
     <div key={id}>
       <Tooltip
+        isSticky={shouldShowDropdown}
         content={shouldShowDropdown ? dropdownContent : label}
         tight={shouldShowDropdown}
       >

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

@@ -24,7 +24,7 @@ const arrowPositionStyle = {
   },
 };
 
-const Tooltip = ({ position, content, tight, children }) => {
+const Tooltip = ({ content, isSticky, position, tight, children }) => {
   const [isActive, setIsActive] = useState(false);
 
   const handleMouseOver = () => {
@@ -39,6 +39,8 @@ const Tooltip = ({ position, content, tight, children }) => {
     }
   };
 
+  const isOpen = isSticky || isActive;
+
   return (
     <div
       className="relative "
@@ -51,8 +53,8 @@ const Tooltip = ({ position, content, tight, children }) => {
       {children}
       <div
         className={classnames(`tooltip tooltip-${position}`, {
-          block: isActive,
-          hidden: !isActive,
+          block: isOpen,
+          hidden: !isOpen,
         })}
       >
         <div
@@ -65,7 +67,7 @@ const Tooltip = ({ position, content, tight, children }) => {
         >
           {content}
           <svg
-            className="absolute text-primary-dark h-4 stroke-secondary-main"
+            className="absolute h-4 text-primary-dark stroke-secondary-main"
             style={arrowPositionStyle[position]}
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -80,11 +82,12 @@ const Tooltip = ({ position, content, tight, children }) => {
 
 Tooltip.defaultProps = {
   tight: false,
+  isSticky: false,
   position: 'bottom',
 };
 
 Tooltip.propTypes = {
-  tight: PropTypes.bool,
+  content: PropTypes.node.isRequired,
   position: PropTypes.oneOf([
     'bottom',
     'bottom-left',
@@ -92,8 +95,9 @@ Tooltip.propTypes = {
     'left',
     'right',
   ]),
+  isSticky: PropTypes.bool,
+  tight: PropTypes.bool,
   children: PropTypes.node.isRequired,
-  content: PropTypes.node.isRequired,
 };
 
 export default Tooltip;

platform/ui/src/components/Tooltip/tooltip.css

@@ -1,10 +1,10 @@
 .tooltip {
-  @apply z-10 absolute;
+  @apply absolute z-10;
 }
 
 /* TOOLTIP WORKAROUND FOR ARROW UP */
 .tooltip.tooltip-bottom .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 14px;
   height: 1px;
@@ -44,7 +44,7 @@
 }
 
 .tooltip.tooltip-right .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 2px;
   height: 15px;
@@ -54,7 +54,7 @@
 }
 
 .tooltip.tooltip-left .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 2px;
   height: 15px;
@@ -64,7 +64,7 @@
 }
 
 .tooltip.tooltip-bottom-right .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 15px;
   height: 2px;
@@ -73,19 +73,10 @@
 }
 
 .tooltip.tooltip-bottom-left .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 15px;
   height: 2px;
   left: 5px;
   top: -1px;
 }
-
-/* TODO: REMOVE BELOW CLASS "showTooltipOnHover" AFTER TOOLTIP REPLACEMENT */
-.showTooltipOnHover .tooltip {
-  display: none;
-}
-
-.showTooltipOnHover:hover .tooltip {
-  display: block;
-}

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

@@ -184,7 +184,7 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
             </div>
           }
         >
-          <div className="relative flex justify-end showTooltipOnHover">
+          <div className="relative flex justify-end">
             <div className="relative">
               <Icon name="profile" className="w-5 text-white" />
               <Icon

platform/ui/src/components/index.js

@@ -37,7 +37,6 @@ import Thumbnail from './Thumbnail';
 import ThumbnailNoImage from './ThumbnailNoImage';
 import ThumbnailTracked from './ThumbnailTracked';
 import ThumbnailList from './ThumbnailList';
-import Toolbar from './Toolbar';
 import ToolbarButton from './ToolbarButton';
 import Tooltip from './Tooltip';
 import Typography from './Typography';
@@ -87,7 +86,6 @@ export {
   ThumbnailNoImage,
   ThumbnailTracked,
   ThumbnailList,
-  Toolbar,
   ToolbarButton,
   Tooltip,
   Typography,