added tooltips in crafter

crafter.html

@@ -125,12 +125,12 @@
                     </tr>
                 </table>
             </div>
-            <div class = "recipe hide-container-block" style = "display:none">
+            <div class = "recipe center hide-container-block" style = "display:none">
                 <div class = "recipe-stats">
                     <div class = "center" id = "recipe-stats"></div>
                 </div>
             </div>
-            <div class = "crafted hide-container-block" style = "display:none">
+            <div class = "crafted center hide-container-block" style = "display:none">
                 <div class = "craft-stats">
                     <div class = "center" id = "craft-stats"></div>
                 </div>
@@ -140,10 +140,8 @@
             <div class = "craft-warnings">
                 <div class = "center" id = "craft-warnings"></div>
             </div>
-            <p>
-            </p>
-            <p>
-            </p>
+            <p></p>
+            <p></p>
             <div class="ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
                 <p class="center title hide-container-block" style = "display:block">
                     Ingredients

crafter.js

@@ -130,6 +130,9 @@ function calculateCraft() {
     
     //Display Recipe Stats
     displayRecipeStats(player_craft, "recipe-stats");
+    for(let i = 0; i < 6; i++) {
+        displayExpandedIngredient(player_craft["ingreds"][i],"tooltip-" + i);
+    }
     //Display Craft Stats
     displayCraftStats(player_craft, "craft-stats");
     //Display Ingredients' Stats

display.js

@@ -802,7 +802,7 @@ function displayRecipeStats(craft, parent_id) {
 
     let ingredTable = document.createElement("table");
     ingredTable.classList.add("itemtable");
-    ingredTable.style.tableLayout = "fixed";
+    ingredTable.classList.add("ingredTable");
     for (let i = 0; i < 3; i++) {
         let row = document.createElement("tr");
         for (let j = 0; j < 2; j++) {
@@ -811,6 +811,7 @@ function displayRecipeStats(craft, parent_id) {
             cell.style.width = "50%";
             cell.classList.add("center");
             cell.classList.add("box");
+            cell.classList.add("tooltip");
             let b = document.createElement("b");
             b.textContent = ingredName;
             b.classList.add("space");
@@ -825,10 +826,16 @@ function displayRecipeStats(craft, parent_id) {
             cell.appendChild(b);
             cell.appendChild(eff);
             row.appendChild(cell);
+
+            let tooltip = document.createElement("div");
+            tooltip.classList.add("tooltiptext");
+            tooltip.classList.add("center");
+            tooltip.id = "tooltip-" + (2*i + j);
+            console.log(tooltip.id);
+            cell.appendChild(tooltip);
         }
         ingredTable.appendChild(row);
     }
-
     elem.appendChild(ldiv);
     elem.appendChild(ingredTable);
 }

narrow.css

@@ -17,6 +17,9 @@
 
 }
 
+.ingredTable {
+    table-layout: "fixed";
+}
 .build, .spells .misc {
     padding: 2%;
     display: grid;

styles.css

@@ -387,3 +387,24 @@ button.toggleOn:hover {
     color: #ff0;
     background: #775;
 }
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    color: #aaa;
+    background: #1e2224;
+    width: min(200%, 75vw);
+    text-align: center;
+    border: 5px solid #BCBCBC;
+    border-radius: 10px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+  }
+  .recipe {
+      z-index: 1;
+  }
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+  }