Fixed Tooltip gets hidden in “Fast & Lightweight” section bug

src/components/Tooltip.jsx

@@ -2,9 +2,10 @@ import PropTypes from "prop-types";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import { useState, useEffect, useRef, useId, cloneElement, isValidElement } from "react";
 
-export default function Tooltip({ content, children, id, dynamicPositioning = true }) {
+export default function Tooltip({ children, content = "Tooltip content", id = undefined, position = "right", dynamicPositioning = true }) {
   const reactId = useId();
-  const tooltipId = id || `tooltip-${reactId}`;
+  const tooltipId = id ?? `tooltip-${reactId}`;
+
   const [isOpen, setIsOpen] = useState(false);
   const [isTouchDevice, setIsTouchDevice] = useState(false);
   const hideTimeoutRef = useRef(null);
@@ -115,9 +116,9 @@ export default function Tooltip({ content, children, id, dynamicPositioning = tr
       {childWithTooltip}
       <ReactTooltip
         id={tooltipId}
-        place="right"
+        place={position}
         appendTo={typeof document !== "undefined" ? document.body : undefined}
-        positionStrategy="fixed"
+        positionStrategy="absolute"
         fallbackPlacements={dynamicPositioning ? ["bottom", "top", "left"] : []}
         openOnFocus
         isOpen={isTouchDevice ? isOpen : undefined}
@@ -127,8 +128,9 @@ export default function Tooltip({ content, children, id, dynamicPositioning = tr
 }
 
 Tooltip.propTypes = {
-  content: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
+  content: PropTypes.string,
   id: PropTypes.string,
   dynamicPositioning: PropTypes.bool,
+  position: PropTypes.string,
 };

src/components/WasmImageProcessor.jsx

@@ -133,16 +133,16 @@ const WasmImageProcessor = () => {
   const EmptyState = useMemo(
     () => (
       <>
-        <Tooltip content="Upload an image from your device">
+        <Tooltip content="Upload an image">
           <Upload className={`anchor-style ${styles.uploadIcon}`} />
         </Tooltip>
 
-        <p className={`text-center ${styles.dragDropText}`}>
-          Drag & Drop or{" "}
-          <Tooltip content="Select an image file from your computer">
-            <span className={`anchor-style ${styles.noTextWrap}`}>Choose File</span>
-          </Tooltip>
-        </p>
+        <Tooltip content="Choose an image">
+          <p className={`text-center ${styles.dragDropText}`}>
+            Drag & Drop or&nbsp;
+            <span className={`anchor-style ${styles.noTextWrap}`}>Choose Image</span>
+          </p>
+        </Tooltip>
       </>
     ),
     [],

src/pages/Home/index.jsx

@@ -16,14 +16,14 @@ const Home = () => (
 
       <div className={styles.featureContainer}>
         <GlassCard>
-          <Tooltip content="Performance feature">
+          <Tooltip content="Performance feature" position="top">
             <h3>⚡ Fast & Lightweight</h3>
           </Tooltip>
           <p>Compiled C++ runs in your browser via WebAssembly with near-native speed.</p>
         </GlassCard>
 
         <GlassCard>
-          <Tooltip content="Integration feature">
+          <Tooltip content="Integration feature" position="top">
             <h3>🛠️ Easy to Integrate</h3>
           </Tooltip>
           <p>Minimal dependencies, works with any project or workflow.</p>