Add tooltip to drag

src/features/utils/components.js

@@ -154,6 +154,14 @@ function Knob({
   }, [onMouseMove]);
 
   return (
+    <div className='flex flex-col items-center'>
+      {/* TOOLTIP */}
+      <div
+        className={` ${
+          isDragging ? 'opacity-100' : 'opacity-0'
+        } 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`}>
+        {Math.round(value * maxValue)}
+      </div>
       <div
         style={{
           position: 'relative',
@@ -164,6 +172,7 @@ function Knob({
           flexShrink: 0,
         }}
         onMouseDown={onMouseDown}>
+        {/* KNOB */}
         <svg className='absolute top-0 left-0' width={size} height={size}>
           <defs>
             <DialMask
@@ -239,6 +248,7 @@ function Knob({
           </svg>
         </svg>
       </div>
+    </div>
   );
 }
 export { Select, Knob, Checkbox };