diff --git a/crafter.html b/crafter.html index 3718241..8dad7ee 100644 --- a/crafter.html +++ b/crafter.html @@ -125,12 +125,12 @@ -
-
--
+ +Ingredients diff --git a/crafter.js b/crafter.js index 5e37420..11abb84 100644 --- a/crafter.js +++ b/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 diff --git a/display.js b/display.js index 2fe65bb..6deb984 100644 --- a/display.js +++ b/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); } diff --git a/narrow.css b/narrow.css index 6cc7a34..75c835b 100644 --- a/narrow.css +++ b/narrow.css @@ -17,6 +17,9 @@ } +.ingredTable { + table-layout: "fixed"; +} .build, .spells .misc { padding: 2%; display: grid; diff --git a/styles.css b/styles.css index 581aa8e..9689a40 100644 --- a/styles.css +++ b/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; + } \ No newline at end of file