more

src/pageElements/Tooltip.js

@@ -1,16 +1,18 @@
+import { useState } from "react";
 import "../styles/tooltip.scss";
 import { InfoCircle } from "react-bootstrap-icons";
 
 function Tooltip(props) {
+  const [show, setShow] = useState(false);
   const { text } = props;
   return (
-    <div className="tooltip-container">
-      <InfoCircle
-        className="infocircle-icon"
-        size="16px"
-        style={{ color: "red" }}
-      />
-      <span className="tooltip-text">{text}</span>
+    <div
+      className="tooltip-container"
+      onMouseEnter={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}
+    >
+      <InfoCircle className="infocircle-icon" size="16px" />
+      {show ? <span className="tooltip-text">{text}</span> : <></>}
     </div>
   );
 }