ui(component): Tooltip component ui-next (#4635)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
-import { Button, PanelSection, ButtonGroup, IconButton, InputNumber, Tooltip } from '@ohif/ui';
-
-import { DoubleSlider, Icons } from '@ohif/ui-next';
-
+import { Button, PanelSection, ButtonGroup, IconButton, InputNumber } from '@ohif/ui';
+import { DoubleSlider, Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
 import { Enums } from '@cornerstonejs/core';
 
 const controlClassNames = {
@@ -13,16 +11,18 @@ const controlClassNames = {
 
 const Header = ({ title, tooltip }) => (
   <div className="flex items-center space-x-1">
-    <Tooltip
-      content={<div className="text-white">{tooltip}</div>}
-      position="bottom-left"
-      tight={true}
-      tooltipBoxClassName="max-w-xs p-2"
-    >
-      <Icons.ByName
-        name="info-link"
-        className="text-primary-active h-[14px] w-[14px]"
-      />
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span>
+          <Icons.ByName
+            name="info-link"
+            className="text-primary-active h-[14px] w-[14px]"
+          />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent sideOffset={4} className="max-w-xs p-2 bg-primary-dark text-white">
+        <div>{tooltip}</div>
+      </TooltipContent>
     </Tooltip>
     <span className="text-aqua-pale text-[11px] uppercase">{title}</span>
   </div>
@@ -45,9 +45,7 @@ const DynamicVolumeControls = ({
   onDynamicClick,
 }) => {
   const [computedView, setComputedView] = useState(false);
-
   const [computeViewMode, setComputeViewMode] = useState(Enums.DynamicOperatorType.SUM);
-
   const [sliderRangeValues, setSliderRangeValues] = useState([0, framesLength - 1]);
 
   const handleSliderChange = newValues => {
@@ -113,15 +111,14 @@ const DynamicVolumeControls = ({
               <div>
                 Operation Buttons (SUM, AVERAGE, SUBTRACT): Select the mathematical operation to be
                 applied to the data set.
-                <br></br> Range Slider: Choose the numeric range within which the operation will be
+                <br /> Range Slider: Choose the numeric range within which the operation will be
                 performed.
-                <br></br>Generate Button: Execute the chosen operation on the specified range of
-                data.{' '}
+                <br />Generate Button: Execute the chosen operation on the specified range of data.
               </div>
             }
           />
           <ButtonGroup
-            className={`mt-2 w-full`}
+            className="mt-2 w-full"
             separated={true}
           >
             <button
@@ -190,8 +187,8 @@ function FrameControls({
         title="4D Controls"
         tooltip={
           <div>
-            Play/Pause Button: Begin or pause the animation of the 4D visualization. <br></br> Frame
-            Selector: Navigate through individual frames of the 4D data. <br></br> FPS (Frames Per
+            Play/Pause Button: Begin or pause the animation of the 4D visualization. <br /> Frame
+            Selector: Navigate through individual frames of the 4D data. <br /> FPS (Frames Per
             Second) Selector: Adjust the playback speed of the animation.
           </div>
         }
@@ -225,4 +222,4 @@ function FrameControls({
       </div>
     </div>
   );
-}
+}