fixed some code

Author: JoseSanchez1996

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -289,6 +289,7 @@ export default function ComponentMap({
                   const handleMouseEnter = () => {
                     setIsHovered(true);
                     setStrokeColor(hoverClass);
+                    // make box
                   };
                   const handleMouseLeave = () => {
                     setIsHovered(false);
@@ -316,18 +317,23 @@ export default function ComponentMap({
                   // isHovered ? stroke="ab269b" : stroke; */
 
                   return (
-                  <LinkComponent
-                    className='compMapLink'
-                    key={i}
-                    data={link}
-                    percent={stepPercent}
-                    stroke={strokeColor} // changing this color on hover
-                    strokeWidth= {strokeWidthIndex} /* strokeWidth */ // width of the link
-                    fill='none'
-                    //testing hover functionality
-                    onMouseEnter={handleMouseEnter}
-                    onMouseLeave={handleMouseLeave}
-                  />
+                  <>
+                    <LinkComponent
+                      className='compMapLink'
+                      key={i}
+                      data={link}
+                      percent={stepPercent}
+                      stroke={strokeColor} // changing this color on hover
+                      strokeWidth= {strokeWidthIndex} /* strokeWidth */ // width of the link
+                      fill='none'
+                      //testing hover functionality
+                      onMouseEnter={handleMouseEnter}
+                      onMouseLeave={handleMouseLeave}
+                    />
+                    <div className='linkHoverInfo'>
+                      <h2>Props: </h2>
+                    </div>
+                  </>
                   )
                 })
                 }
@@ -541,7 +547,7 @@ export default function ComponentMap({
           </Tree>
         </Group>
       </svg>
-      {tooltipOpen && tooltipData && (
+      {tooltipOpen && tooltipData && (  // if the tooltip is open and there is data to display...
         <TooltipInPortal
           // set this to random so it correctly updates with parent bounds
           key={Math.random()}
@@ -584,6 +590,7 @@ export default function ComponentMap({
           </div>
         </TooltipInPortal>
       )}
+
     </div>
   );
 }

src/app/styles/components/_componentMap.scss

@@ -5,6 +5,9 @@
 // .compMapLink:hover {
 //   box-shadow: 10px 10px rgb(163, 205, 24);
 // };
+* {
+  border: 1px solid red;
+}
 
 .comp-map-options {
   color: $map-options-label;
@@ -50,3 +53,9 @@
 }
 
 
+.linkHoverInfo {
+  height: 100px;
+  width: 100px;
+  background-color: #f1f1f1;
+  z-index: 100;
+}