Add tooltip to drag

src/features/utils/components.js

@@ -154,90 +154,100 @@ function Knob({
   }, [onMouseMove]);
 
   return (
-    <div
+    <div className='flex flex-col items-center'>
-      style={{
+      {/* TOOLTIP */}
-        position: 'relative',
+      <div
-        cursor: 'pointer',
+        className={` ${
-        height: size,
+          isDragging ? 'opacity-100' : 'opacity-0'
-        width: size,
+        } transition duration-75 ease-in select-none pointer-events-none absolute -mt-6 bg-gray-800 text-white truncate text-xs box-content rounded text-center w-8 py-0.5`}>
-        overflow: 'hidden',
+        {Math.round(value * maxValue)}
-        flexShrink: 0,
+      </div>
-      }}
+      <div
-      onMouseDown={onMouseDown}>
-      <svg className='absolute top-0 left-0' width={size} height={size}>
-        <defs>
-          <DialMask
-            size={size}
-            startAngle={START_ANGLE}
-            endAngle={END_ANGLE}
-            id={`value-track-mask-${uid}`}
-          />
-          <DialMask
-            size={size}
-            startAngle={dial_zero}
-            endAngle={valueAngle}
-            id={`value-mask-${uid}`}
-          />
-        </defs>
-        {/* Track outer */}
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={size / 2}
-          className='fill-current text-blue-900 opacity-50'
-          style={{ mask: `url(#value-track-mask-${uid})` }}
-        />
-        {/* Value fill */}
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={size / 2}
-          className='fill-current text-blue-500'
-          style={{ mask: `url(#value-mask-${uid})` }}
-        />
-      </svg>
-      <svg
         style={{
-          position: 'absolute',
+          position: 'relative',
-          top: 0,
+          cursor: 'pointer',
-          left: 0,
+          height: size,
-        }}>
+          width: size,
-        {/* Knob */}
+          overflow: 'hidden',
-        <circle
+          flexShrink: 0,
-          cx={radius}
+        }}
-          cy={radius}
+        onMouseDown={onMouseDown}>
-          r={radius - fillWidth}
+        {/* KNOB */}
-          className='fill-current text-gray-300'
+        <svg className='absolute top-0 left-0' width={size} height={size}>
-        />
+          <defs>
-        {/* Highlight */}
+            <DialMask
-        <circle
+              size={size}
-          cx={radius}
+              startAngle={START_ANGLE}
-          cy={radius}
+              endAngle={END_ANGLE}
-          r={radius - fillWidth}
+              id={`value-track-mask-${uid}`}
-          style={{
+            />
-            fill: 'transparent',
+            <DialMask
-          }}
+              size={size}
-        />
+              startAngle={dial_zero}
+              endAngle={valueAngle}
+              id={`value-mask-${uid}`}
+            />
+          </defs>
+          {/* Track outer */}
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={size / 2}
+            className='fill-current text-blue-900 opacity-50'
+            style={{ mask: `url(#value-track-mask-${uid})` }}
+          />
+          {/* Value fill */}
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={size / 2}
+            className='fill-current text-blue-500'
+            style={{ mask: `url(#value-mask-${uid})` }}
+          />
+        </svg>
         <svg
-          width={size}
-          height={size}
           style={{
             position: 'absolute',
             top: 0,
             left: 0,
           }}>
-          {
+          {/* Knob */}
-            <line
+          <circle
-              x1={lineX1}
+            cx={radius}
-              y1={lineY1}
+            cy={radius}
-              x2={size / 2}
+            r={radius - fillWidth}
-              y2={size / 2}
+            className='fill-current text-gray-300'
-              strokeLinecap='round'
+          />
-              strokeWidth='3'
+          {/* Highlight */}
-              className='stroke-current text-blue-500'></line>
+          <circle
-          }
+            cx={radius}
+            cy={radius}
+            r={radius - fillWidth}
+            style={{
+              fill: 'transparent',
+            }}
+          />
+          <svg
+            width={size}
+            height={size}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+            }}>
+            {
+              <line
+                x1={lineX1}
+                y1={lineY1}
+                x2={size / 2}
+                y2={size / 2}
+                strokeLinecap='round'
+                strokeWidth='3'
+                className='stroke-current text-blue-500'></line>
+            }
+          </svg>
         </svg>
-      </svg>
+      </div>
     </div>
   );
 }